webpack - 包括来自多（配置）构建的捆绑包

Question

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

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

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

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

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>'
}