Usuń lub nie utworzyć plik dla każdego wpisu w WebPacka

Question

Cześć Mam config WebPACK z tych punktów wejścia:

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

Moja WebPack jest stworzenie [name].bundle.js i [name].map dla każdego wpisu.
Sensowne przez pierwsze 3 javascript wpisy ale CSS i wpisy INDEKS są tylko dla przetwarzania mój główny plik CSS i mój główny plik HTML, który jest traktowana później przez ExtractTextPlugin

Więc po kompilacji I” m zatrzymany z jakiegoś śmietnika jak css.bundle.js i css.map która zawiera tylko:

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

    // removed by extract-text-webpack-plugin 

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

Jak mogę powiedzieć WebPack do NIE zbudować plików dla niektórych wpisów? (jak css/index)
Lub alternatywnie usunąć niepotrzebne pliki po kompilacji?

Dzięki z góry

Answer 1

I hacked razem SuppressEntryChunksPlugin (kod poniżej), który pomija wyjście z tych bezużytecznych wiązkach, jeśli powiesz to który grupuje będzie bezużyteczny. Użyj go w webpack.config.js tak:

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

Wyłączenie odpowiedzialności: To działa na mnie razem z extract-loader a file-ładowarki wyodrębnić CSS/HTML z wpisów i pisać pliki do wyjścia. Nie testowałem go za pomocą ExtractTextPlugin. (To robi pracę z WebPACK-dev-serwer. I wydaje się, aby skutecznie tłumić sourcemaps zewnętrznych jeśli ich użyciu. Używałem go zarówno Webpack 1.13 i 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; 

Poza tym jestem przeciwieństwem "eksperta webpacka", więc prawie na pewno jest lepszy sposób na zrobienie tego. (Być może ktoś chciałby zamienić to w prawdziwą, opublikowaną wtyczkę do przeglądarki internetowej, z testami i czymś?)

Answer 2

Połączyłem webpack plugin, aby usunąć dodatkowe pliki na podstawie ich rozmiaru wyjściowego, zamiast opierać na ich nazwie - to jest był dla mnie trochę bardziej przyszłościowy, ponieważ nadal dodawałem dodatkowe punkty wejścia do konfiguracji mojego pakietu sieciowego.

zainstalować używając npm lub yarn

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

W pliku webpack.config.js:

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

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

można zobaczyć pełną listę opcji na Webpack Extraneous File Cleanup Plugin Github Page