webpack - HtmlWebpackPlugin 包含的包文件的顺序

Question

我的环境如下

webpack

角度2

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

您可以使用 'manual' chunksSortMode 的值选项和插件将按照 chunks 中的顺序对您的块进行排序选项。
见 this GitHub issue详情。

例子:

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