HtmlWebpackPlugin order of included bundle files

Question

My environment is as follows

• webpack
• angular2
• HtmlWebpackPlugin

my extracted webpack.config.js file is as follows

entry: {
  'polyfills': './src/polyfills.browser.ts',
  'main': './src/main.browser.ts'
},

  new HtmlWebpackPlugin({
    template: 'src/index.html'
  }),

The final html that gets generated has the following scripts references

<script type="text/javascript" src="main.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script>

My problem is that polyfills.bundle.js is referenced after main.bundle.js. Due to this the app does not work. From what I know the script files should be referenced in the reverse order. How do I fix this? Plus how does HtmlWebpackPlugin determine the order in which to insert the scripts?

Answer 1

You can use 'manual' value for chunksSortMode option and plugin will sort your chunks as they ordered in chunks option. See this GitHub issue for details.

Example:

new HtmlWebpackPlugin({
  ...
  chunks: ['polyfills', 'main'],
  chunksSortMode: 'manual'
})