Webpack: ExtractTextPlugin: Not to generate separate empty JS file when have several css entry points?

Question

I have several CSS entry points:

entry: {
  ...
  styles: [
    ...
  ],
  fonts: [
    ...
  ]
},

and I'm using ExtractTextPlugin to bundle CSS separately:

  new ExtractTextPlugin({
    filename: `[name].bundle.css`
  }),

So like output I have 2 CSS files: styles.css and fonts.css that is correct but also empty styles.js and fonts.js. Is there a way to not generate empty JS files?

Answer 1

I put together a webpack plugin to remove extra files based on their final output size as I had the same issue - 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

Answer 2

Only add the main javascript files as entries and require all fonts and style via require('./style.css')

webpack.config.js:

entry: {
  'main': 'app/main',
},
output: {
  path: 'static',
  publicPath: '/static/',
  filename: '[name].bundle.js',
  chunkFilename: '[chunkhash].bundle.js',
},
module: {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader'
      }),
    }]
},
plugins: [
  new ExtractTextPlugin('[name].bundle.css'),
],

That would give you a /static/main.bundle.css with all css (transitively) included from your app/main.js.

Same for fonts, but you would need a second ExtractTextPlugin instance like:

const extractCSS = new ExtractTextPlugin('stylesheets/[name].bundle.css');
const extractFonts = new ExtractTextPlugin('stylesheets/[name].bundle.woff');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      },
      {
        test: /\.woff$/i,
        use: extractFonts.extract([ 'url-loader' ])
      },
    ]
  },
  plugins: [
    extractCSS,
    extractFonts
  ]
};

See the Documentation - Multiple Instances for more info about that.

Answer 3

I don't think there's any way to do what you are trying to do, the same question has been asked on the github issue tracker, without any solution. If the problem is with the html-webpack-plugin adding the empty js files, you should be able to fix that by explicitly specifying what chunks to include or exclude.