HtmlWebpackPlugin 包含的包文件的顺序

Question

我的环境如下

• 网络包
• 角2
• HtmlWebpack 插件

我提取的 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选项中的顺序对您的块进行排序。有关详细信息，请参阅此 GitHub 问题。

例子：

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