包含来自multi（con​​fig）build的bundle

Question

为了优化构建性能，我使用两个单独的配置来构建应用程序： 第一个捆绑包更频繁地更改，因此第二个大捆绑内容不会破坏其重建过程（因为它们在一个配置中虽然它们是不同的捆绑包，但只重建第一个捆绑包的过程仍然会减慢）。 / p>

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？ / p>

实际上我有一些使用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>'
}