2016-05-24 6 views
6

Hallo ich eine webpack Config mit diesen Einspeisepunkten haben:löschen oder eine Datei nicht für jeden Eintrag in webpack erstellen

entry: { 
    'polyfills': './src/polyfills.ts', 
    'vendor': './src/vendor.ts', 
    'app':  './src/app.ts', 
    'css': './src/css/main.unique.scss', 
    'index': './src/index.unique.html', 
    }, 

Mein webpack ist ein [name].bundle.js und einen [name].map für jeden Eintrag zu erstellen.
Es macht Sinn für die ersten 3 JavaScript Einträge aber die CSS und die Indexeinträge sind nur für mein Haupt CSS Verarbeitungsdatei und meine Haupt-HTML-Datei, die von der ExtractTextPlugin später behandelt bekommen

So nach einem Build I‘ m stecken mit einigen Müll wie css.bundle.js und css.map, die nur enthält:

webpackJsonp([1],[ 
/* 0 */ 
/***/ function(module, exports) { 

    // removed by extract-text-webpack-plugin 

/***/ } 
]); 
//# sourceMappingURL=css.map 

Wie kann ich webpack zu sagen NICHT-Dateien für einige Einträge bauen? (wie css/index)
Oder alternativ diese nutzlosen Dateien nach dem Kompilieren zu löschen?

Vielen Dank im Voraus

Antwort

8

ich zusammen (Code unten) eine SuppressEntryChunksPlugin gehackt, die Ausgabe dieser nutzlosen Bündel überspringt, wenn Sie es sagen, welche nutzlos wird bündelt. Verwenden Sie in Ihrem webpack.config.js wie folgt aus:

var SuppressEntryChunksPlugin = require('./SuppressEntryChunksPlugin'); 
... 
    entry: { 
    'app': './src/app.ts', 
    'css': './src/css/main.unique.scss', 
    'index': './src/index.unique.html', 
    }, 
    plugins: [ 
    // don't output the css.js and index.js bundles 
    new SuppressEntryChunksPlugin(['css', 'index']) 
    ] 

Haftungsausschluss: Es funktioniert für mich zusammen mit extract-loader und Datei-Loader die css/html aus den Einträgen zu extrahieren und die Dateien in die Ausgabe zu schreiben. Ich habe es nicht mit ExtractTextPlugin getestet. (Es tut Arbeit mit webpack-dev-Server. Und es scheint erfolgreich externe sourcemaps zu unterdrücken, wenn Sie sie verwenden. Ich habe es mit beiden Webpack 1.13 und 2.2.1 verwendet.)

// SuppressEntryChunksPlugin.js 

function SuppressEntryChunksPlugin(options) { 
    if (typeof options === 'string') { 
    this.options = {skip: [options]}; 
    } else if (Array.isArray(options)) { 
    this.options = {skip: options}; 
    } else { 
    throw new Error("SuppressEntryChunksPlugin requires an array of entry names to strip"); 
    } 
} 

SuppressEntryChunksPlugin.prototype.apply = function(compiler) { 
    var options = this.options; 

    // just before webpack is about to emit the chunks, 
    // strip out primary file assets (but not additional assets) 
    // for entry chunks we've been asked to suppress 
    compiler.plugin('emit', function(compilation, callback) { 
    compilation.chunks.forEach(function(chunk) { 
     if (options.skip.indexOf(chunk.name) >= 0) { 
     chunk.files.forEach(function(file) { 
      // delete only js files. 
      if (file.match(/.*\.js$/)) { 
      delete compilation.assets[file]; 
      } 
     }); 
     } 
    }); 
    callback(); 
    }); 
}; 

module.exports = SuppressEntryChunksPlugin; 

Außerdem bin ich genau das Gegenteil von "webpack expert", also gibt es mit Sicherheit einen besseren Weg dies zu tun. (Vielleicht möchte jemand dies in eine echte, veröffentlichte Webpack-Plugin, mit Tests und was nicht?)

+0

Oh sehen, du bist ein verdammt webpack hacker, dude :) Danke fürs Teilen! Du hast mir einen anständigen Haufen Haare gerettet :) –

+0

Dies funktioniert bei mir nicht: '( – NealVDV

+0

@NealVDV tut mir leid, das zu hören. Welche Version von Webpack? Extract-Loader? Wie schlägt es fehl, oder was läuft falsch? – medmunds

0

Ich habe eine webpack plugin zusammengestellt, um zusätzliche Dateien auf der Grundlage ihrer Ausgabegröße zu entfernen, anstatt auf ihren Namen - es ist Ich war ein wenig zukunftssicher für mich, da ich weiterhin zusätzliche Eingangspunkte zu meiner Webpack-Konfiguration hinzufüge.

Installieren npm oder yarn mit

npm install webpack-extraneous-file-cleanup-plugin --save-dev 
yarn add webpack-extraneous-file-cleanup-plugin --dev 

In Ihrer webpack.config.js Datei:

const ExtraneousFileCleanupPlugin = require('webpack-extraneous-file-cleanup-plugin'); 

module.exports = { 
    ... 
    plugins: [ 
    new ExtraneousFileCleanupPlugin({ 
     extensions: ['.js'] 
    }) 
    ] 
} 

Sie können die vollständige Liste der Optionen auf dem Webpack Extraneous File Cleanup Plugin Github Page

Verwandte Themen