webpack - 包含来自多(配置)构建的 bundle

Question

为了优化构建性能，我正在使用两个单独的配置构建应用程序:第一个 bundle 更频繁地更改，因此第二个大 bundle 内容不会干扰其重建过程(因为它们位于一个配置中，尽管它们是不同的 bundle ，仅重建第一个 bundle 的过程仍然会减慢)。

configs = [
{ 
   entry: {app: './app'},
   output: ...
   plugins: [
     new HtmlWebpackPlugin({..})
  ]
},
  // this is second rarely changed bundle
{
  entry: {big-bundle: './some/big'}.
  output: ...
}
]

由于只有一个index.html，它被插入其中一个配置中，问题是如何在生成的HTML中包含对big-bundle的引用，如果它的名称可能是可变的，则使用HtmlWebpackPlugin取决于哈希值？

实际上，我有一些使用 HtmlWebpackPlugin 提供的事件 Hook 解决方案的想法。但我想知道是否还有其他建议。

Answer 1

您是否考虑过使用文件加载器结合 require.context 将其加载到正确的位置？

您可以使用 require.context 将文件名与正则表达式进行匹配，并使用文件加载器来复制文件。

const context = require.context('./<the-files-directory>', false, /big-
bundle.*?\.js$/);
context.keys().forEach(key => context(key));

然后有一个加载器:

{
  test: /big-bundle.*?\.js$/,
  loader: 'file!name=<name for index.html>'
}