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>

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

Answer 1

您可以对chunksSortMode选项使用'manual'值，插件会按照chunks选项中的顺序对您的块进行排序。有关详细信息，请参阅this GitHub issue。

示例：

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

包含捆绑文件的HtmlWebpackPlugin顺序

1 个答案: