ExtractTextPlugin extracts from asynchronous split point chunks

I have a webpack.config.js like:

module.exports = {
  entry: {
    index: ['./app/routes/ClientRouter', './app/pages/Index'],
    create:  ['./app/routes/ClientRouter', './app/pages/Create'],
    play:  ['./app/routes/ClientRouter', './app/pages/Play'],
    vendor: ['react', 'react-dom', 'flux']
  },
  output: {
    path: __dirname + '/public/build',
    publicPath: '/build/',
    filename: '[name].js',
    chunkFileName: '[id].chunk.js'
  },
  resolve: {
    alias: alias
  },
  module: {
    noParse: noParse,
    loaders: [
      { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader'), exclude: /node_modules/ }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js', minChunks: Infinity }),
    new ExtractTextPlugin('[name].css', {
      allChunks: false
    })
  ]
};

And a client router like:

function route() {
  var location = window.location.pathname,
      appContainer = document.getElementById('app-container'),
      routeMatches;

  if(!location || location == '/') {
    require.ensure(['../pages/Index'], function() {
      var Page = require('../pages/Index');
      ReactDOM.render(<Page />, appContainer);
    });
  } else if(routeMatches = location.match(/^\/create$/)) {
    require.ensure(['../pages/Create'], function() {
      var Page = require('../pages/Create');
      ReactDOM.render(<Page />, appContainer);
    });
  } else if(routeMatches = location.match(/^\/play\/([01]+)$/)) {
    require.ensure(['../pages/Play'], function() {
      var Page = require('../pages/Play');
      ReactDOM.render(<Page mazeData={routeMatches[1]}/>, appContainer);
    });
  }
}

The ExtractTextPlugin creates index.js/index.css, create.js/create.css, etc, with the extracted CSS for each containing only what is directly required from each of those entry points. It also generates 1.1.js, 2.2.js, and 3.3.js for the split points to load pages asynchronously, but the CSS is removed from them as well. I.e. (from 1.1.js):

/***/ 5:
/***/ function(module, exports) {

    // removed by extract-text-webpack-plugin

/***/ }

This means as you navigate between pages the CSS for the asynchronously-loaded splits do not get added to the page, only their JS. You only have the CSS from the initial entry point.

It seems like 1.1.js, etc should still contain their inline CSS and inject it, like when you aren't using the ExtractTextPlugin. That way you can get the benefits of the extracted entry point CSS for the initial pageload and avoid an FOUC, but after that everything works as a single page app.

I thought the plugin would work that way from the documentation, which says "by default it extracts only from the initial chunk(s)." And I tried explicitly setting 'allChunks: false'.

[noomorph]

+1, the same problem here

probably, CSS should not be extracted from async bundles

@sokra should I try to produce a pull request to do this?

[Duan112358]

@chrispesto I use bundle-loader to extract async modules,
and ExtractTextWebpackPlugin to extract common used css, the other module based css just bundled within js as allChunks: false specified. And, it work correctly.

[Duan112358]

you have three entries however

[KJTsanaktsidis]

+1 this is a real problem. In our case we have a tests chunk which has all of the tests and the asynchronous chunks baked into it, whilst in the actual app they are only loaded asynchronously. So all of the CSS from these chunks ends up extracted into tests.css instead of staying in the chunk.

[KJTsanaktsidis]

Of course, the question is, what should the behaviour be if a file is referenced synchronously from one entry chunk and asynchronously from another? Should the text be included in both the bundle and in the extracted CSS from the synchronously-requiring chunk, or not be extracted at all?

[scabbiaza]

I agree too, that it's a problem.
In my opinion it should not be any different in behaviour between css and js files, and even images, texts etc.
If files are in the the asynchronously specify dependencies, they should load asynchronously.

[stephenjwatkins]

+1

@sokra Is there any way to keep the styles in the chunks that are split via require.ensure?

@chrispesto did you figure this out?

[jarvanxing]

+1 Wondering if it's possible for ExtractTextWebpackPlugin to generate CSS files for each of the split points.

I really need this.

[andreechristian]

+1 is there any updates on this? I cannot get the splitted CSS using require.ensure

[jackyon]

+1

[aaronwng]

+1

[itsmepetrov]

+1