Webpack with CommonsChunkPlugin results with wrong bundle order in html file

Question

I'm trying to use CommonChunkPlugin with one "extra" chunk containing only webpack runtime to get proper hashing (this doesn't change vendor hash when only app files have changed). The trick is described in official webpack repo here.

This itself works fine, chunk hashes are correct, but the issue is that my HTML file generated has bundles in wrong order: manifest, app and then vendor*, whereas it should be manifest, vendor, app.

CommonsChunkPLugin is configured as follows:

new webpack.optimize.CommonsChunkPlugin({
  names: ['vendor', 'manifest']
}),

and entries are as follows:

entry: {
  app: './index.js',
  vendor: ['foo', 'bar', 'baz']
}

Any tips?

Answer 1

OK, solved it. Looks like providing chunksSortMode: 'dependency' to html-webpack-plugin config solves this issue. So it's not webpack core issue, but something with sorting chunks (default by id sort doesn't sort chunks correctly in this case, not sure why yet)