extracting one css file per webpack chunk (require.ensure)

While trying to implement page optimizations in our app, we want to have ability to generate separate CSS files per webpack chunk to improve page rendering performance for first page in our application. To achieve that, we have been trying to use extract-text-plugin in combination with require.ensure like so:

const $ = require('load-webpack-plugins')();
module.exports = {
  entry: { 'app': './src/app.js' },
  output: {
    path: 'dist',
    filename: '[name].js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      { test: /\.js$/, use: [{ loader: 'babel-loader' }] },
      {
        test: /\.css$/,
        use: $.ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [{ loader: 'css-loader' }]
        })
      }
    ]
  },
  plugins: [
    new $.ExtractTextPlugin({ filename: '[name].[contenthash].css', allChunks: true }),
    new $.NamedModulesPlugin(),
  ]
}

with app.js being:

console.log('this is app.js');

require.ensure([], require => {
  require('./a.css');
}, 'base');

require.ensure([], require => {
  require('./b.css');
}, 'first');

require.ensure([], require => {
  require('./c.css');
}, 'second');

and a.css being:

.a {
  color: red;
}

and b.css being:

.b {
  color: red;
}

and c.ss being:

.c {
  color: red
}

Problem is we are getting only one CSS file dist/app.e2e9da337e9ab8b0ca431717de3bea22.css with content of all the 3 chunks:

.a {
  color: red;
}

.b {
  color: red;
}

.c {
  color: red
}


/*# sourceMappingURL=app.e2e9da337e9ab8b0ca431717de3bea22.css.map*/

how do we go about extracting one css file per webpack chunk (require.ensure) in this case? should this even be supported by extract-text-plugin.

PS: Here is an example repository demonstrating this issue -- https://github.com/osdevisnot/extract-text-demo

Recommended topics

Hot tags