CODEWITHSUNDEEP
javascriptwebpack
artparks
artparks

Reputation: 761

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

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?

Upvotes: 9

Views: 5819

Answers (3)

Anuj
Anuj

Reputation: 1474

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

Upvotes: -1

vbarbarosh
vbarbarosh

Reputation: 3702

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.

Upvotes: 11

chriscberks
chriscberks

Reputation: 425

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');
// ...

Upvotes: 4

Related Questions