Webpack retrieves a text plugin that outputs a .js and .css file for writing styles

Question

To build prod, I want my webpack configuration to have two entry points: one for JS and one for SCSS, and I want them to be output in two separate files (one JS, one CSS).

However, extract-text-webpack-plugin creates two JS files and one CSS file; those. the entry point for SCSS creates both the desired CSS file and the JS file that I do not want. This unused JS file contains nothing but the webpack template and // removed by extract-text-webpack-plugin . Therefore, he copes with his task perfectly, but nevertheless creates this unnecessary file. My webpack configuration (showing relevant parts):

 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 }) ] }; 

Thus, in essence, the output creates two .js files, one for each entry, and then the extract plugin creates the actual desired .css file. How can I prevent the output from this unnecessary file?

Answer 1

Other parameters are combining app and style fragments into one:

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

Thus, the web package will produce only one piece - the app . At the same time, ExtractTextPlugin will remove any .scss modules from it. Content will be placed in bundle.[chunkhash].css .

Answer 2

Remove the style entry point from your style configuration:

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

Then require it from your app.js file:

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

Answer 3

I put together a webpack plugin to remove additional files based on their final output size - if these files tend to be very small, this seems to be just a case of checking how large they are and removing the small, useless ones.

Install using npm or yarn

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

In your webpack.config.js file:

 const ExtraneousFileCleanupPlugin = require('webpack-extraneous-file-cleanup-plugin'); module.exports = { ... plugins: [ new ExtraneousFileCleanupPlugin({ extensions: ['.js'] }) ] } 

You can see the full list of options Plugin for cleaning external Webpack Gigub files