HtmlWebpackPlugin包含的捆绑文件的顺序

Question

我的环境如下：

• webpack
• angular2
• HtmlWebpackPlugin

我提取的 webpack.config.js 文件如下：

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

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

生成的最终HTML包含以下脚本引用。

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

我的问题是polyfills.bundle.js在main.bundle.js之后被引用。由于这个原因，应用程序无法正常工作。据我所知，脚本文件应该按相反的顺序引用。我该如何解决这个问题？此外，HtmlWebpackPlugin如何确定插入脚本的顺序？

- tmp dev

Answer 1

您可以将chunksSortMode选项的值设置为'manual'，插件会按照在chunks选项中指定的顺序对您的块进行排序。详情请参见此GitHub问题。

示例：

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

- GProst