Eliminare o non creare un file per ogni voce in webpack

Question

Ciao ho un config webpack con questi punti di ingresso:

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

mio webpack è la creazione di un [name].bundle.js e un [name].map per ogni voce.
ha senso per i primi 3 javascript voci, ma il CSS e le voci dell'indice sono solo per l'elaborazione di mio file CSS principale e il mio file HTML principale che vengono trattati in seguito dalla ExtractTextPlugin

Così, dopo una build I' m bloccato con un po 'di spazzatura come css.bundle.js e css.map che contiene solo:

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

    // removed by extract-text-webpack-plugin 

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

Come posso dire a webpack NON costruire i file per alcune voci? (come css/index)
Oppure in alternativa cancellare quei file inutili dopo la compilazione?

Grazie in anticipo

Answer 1

ho messo insieme un SuppressEntryChunksPlugin (codice qui sotto), che salta uscita di questi fasci inutili, se gli si dice che bundle sarà inutile. Utilizzare nel vostro webpack.config.js come questo:

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']) 
    ] 

Avvertenze: Funziona per me insieme a extract-loader e il file-loader per estrarre il css/html dalle voci e scrivere i file in uscita. Non l'ho provato con ExtractTextPlugin. (Si fa lavoro con webpack-dev-server. E sembra di sopprimere con successo sourcemaps esterni se si sta utilizzando loro. L'ho usato sia con Webpack 1.13 e 2.2.1.)

// 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; 

Inoltre, sono esattamente l'opposto di "esperto di webpack", quindi c'è quasi sicuramente un modo migliore per farlo. (Forse qualcuno vorrebbe trasformarlo in un vero plugin webpack pubblicato, con test e quant'altro?)

Answer 2

Ho messo uno webpack plugin per rimuovere file aggiuntivi in ​​base alla loro dimensione di output, piuttosto che basarlo sul loro nome - è sono stato un po 'più a prova di futuro per me mentre continuo ad aggiungere punti di ingresso extra alla mia configurazione del webpack.

Installare utilizzando npm o yarn

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

Nel file webpack.config.js:

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

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

si può vedere l'elenco completo delle opzioni sul Webpack Extraneous File Cleanup Plugin Github Page