Webpack extract text plugin outputting .js and .css file for styles entry

Question

For a prod build I want my webpack config to have two entry points, one for JS and one for SCSS, and I want these to be output to two separate files (one JS, one CSS).

However extract-text-webpack-plugin is creating two JS files and one CSS file; ie the entry point for SCSS is producing both the desired CSS file plus a JS file that I don't want. This unused JS file contains nothing other than the webpack boilerplate and // removed by extract-text-webpack-plugin. So it's doing its job fine, but still creating this unnecessary file. My webpack config is (showing the pertinent 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
        })  
    ]
};

So essentially the output is creating two .js files, one for each entry and then the extract plugin is creating the actual desired .css file. How can I prevent the output from creating that unnecessary file?

score 11 · Answer 1 · answered Aug 19 '16 at 15:53

11

Another options is to merge app and style chunks into one:

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

That way webpack will produce only one chunk - app. At the same time ExtractTextPlugin will remove any .scss modules from it. Contents will be placed into bundle.[chunkhash].css.

answered Aug 19 '16 at 15:53

vbarbarosh

3,502
4
33
43

I prefer your method over using `require("app.scss")` within JS. It's much cleaner to have the `.scss` visible in the `webpack.config` file. – M - Jun 22 '17 at 19:19
same, I like this method a lot better – Jonesopolis Feb 20 '18 at 12:15
and, i think this is the only right way on some situation, just like define some env special css, for example, one css only from product not for dev. thank you very much, this is clear enough. – defend orca Nov 12 '20 at 20:02

score 4 · Answer 2 · answered Jun 08 '16 at 08:06

4

Remove the style entry point from your webpack config:

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

Then require it from your app.js file:

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

answered Jun 08 '16 at 08:06

chriscberks

425
2
8

Anuj · Answer 3 · 2017-06-16T16:51:29.153

I put together a webpack plugin to remove extra files based on their final output size - given these files tend to be very small, it seems to just be 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 on the Webpack Extraneous File Cleanup Plugin Github Page

Webpack extract text plugin outputting .js and .css file for styles entry

3 Answers3

Linked