Estratto del testo per l'estensione del pacchetto di file .js e file .css per la voce stili

Question

Per una build prod voglio che la mia configurazione del webpack abbia due punti di ingresso, uno per JS e uno per SCSS, e voglio che vengano emessi in due distinti file (un JS, un CSS).

Tuttavia extract-text-webpack-plugin sta creando due file JS e un file CSS; vale a dire il punto di ingresso per SCSS sta producendo sia il file CSS desiderato più un file JS che non voglio. Questo file JS inutilizzato non contiene nient'altro che il boilerplate di webpack e // removed by extract-text-webpack-plugin. Quindi sta facendo bene il suo lavoro, ma sta ancora creando questo file non necessario. Il mio webpack config (mostrando le parti pertinenti):

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: { 
     app: './client/src/app.js', 
     style: './client/src/app.scss' 
    }, 
    output: { 
     path: __dirname + '/server/assets/', 
     publicPath: '/', 
     filename: 'bundle.[chunkhash].js', 
    }, 
    module: { 
     loaders: [{ 
     test: /\.js/, 
     exclude: /node_modules/, 
     include: /src/, 
     loader: 'babel-loader' 
     },{ 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style', 'css', 'sass'), 
     },{ 
     test: /.*\.(woff|woff2|eot|ttf)$/i, 
     loader: "url-loader?limit=10000&mimetype=application/font-woff" 
     },{ 
     test: /.*\.(png|svg|jpg)$/i, 
     loaders: [ 
     'file?hash=sha512&digest=hex&name=[hash].[ext]', 
     'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}' 
     ] 
     }] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('bundle.[chunkhash].css', { 
     allChunks: true 
     }) 
    ] 
}; 

Quindi, in sostanza l'uscita è la creazione di due file .js, uno per ogni voce e poi il plugin estratto sta creando il file css desiderato vero e proprio. Come posso evitare che l'output crei quel file non necessario?

Answer 1

Rimuovere il punto style voce dalla configurazione webpack:

module.exports = { 
    entry: { 
    app: './client/src/app.js' 
    }, 
    // ... 
} 

Poi require dal file app.js:

// app.js 
require('./app.scss'); 
// ... 

Answer 2

Un'altra possibilità è quella di unire i app e style pezzi in una sola:

entry: { 
    app: [ 
     './client/src/app.js', 
     './client/src/app.scss' 
    ] 
} 

In questo modo il webpack produrrà solo un chunk - app. Allo stesso tempo, ExtractTextPlugin rimuoverà tutti i moduli .scss da esso. I contenuti saranno inseriti in bundle.[chunkhash].css.

Answer 3

Ho assemblato uno webpack plugin per rimuovere file aggiuntivi in ​​base alla dimensione finale dell'output - dato che questi file tendono ad essere molto piccoli, sembra essere solo il caso di verificare quanto sono grandi e rimuovere quelli piccoli e inutili.

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