Webpack with CommonsChunkPlugin leads to the wrong bind order in html file

Question

I am trying to use CommonChunkPlugin with one "extra" fragment containing only the webpack runtime to get the correct hash (this does not change the hash of the provider when changing only the application files). The trick is described in the official webpack repo here .

This in itself is fine, the hashes of the pieces are correct, but the problem is that my HTML file has the packages in the wrong order: manifest, application, and then provider * , whereas it should be a manifest, provider, application .

CommonsChunkPLugin is configured as follows:

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

and the entries are as follows:

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

Any tips?

Answer 1

OK, I decided. It seems that providing chunksSortMode: 'dependency' in the html-webpack-plugin config solves this problem. So this is not a problem with webpack core, but something with sorting pieces (by default, sorting by id does not sort pieces in this case, I don’t know why)