如何在多页Webpack项目中将单独的供应商脚本添加到不同的页面？

Question

我在配置中有多个入口点：

entry: {
 'main': './src/main.js',
 'page.a': './src/page.a.js',
 'page.b': './src/page.b.js'
}

每个文件中都有来自/ node_modules /的导入。

使用SplitChunks单独编译的供应商脚本：

splitChunks: {
 cacheGroups: {
  vendor: {
   test: /[\\/]node_modules[\\/].*\.js$/,
   chunks: 'all'
  }
 }
}

所以在我的建筑中，我有

• main.js
• page.a.js
• page.b.js
• vendor〜main.js
• vendor〜page.a.js
• vendor〜page.b.js

HTML页面编译如下：

new HtmlWebpackPlugin({
 template: `${paths.src}/template/pages/main.pug`,
 filename: 'main.html'
}),
new HtmlWebpackPlugin({
 template: `${paths.src}/template/pages/page.a.pug`,
 filename: 'page.a.html'
}),
new HtmlWebpackPlugin({
 template: `${paths.src}/template/pages/page.b.pug`,
 filename: 'page.b.html'
})

如何使文件vendor〜page.a.js和vendor〜page.b.js仅分别添加到page.a.html和page.b.html？然后将vendor〜main.js添加到所有三个中？

喜欢这个：

main.html

• vendor〜main.js
• main.js

page.a.html

• vendor〜main.js
• vendor〜page.a.js
• page.a.js
• main.js

page.b.html

• vendor〜main.js
• vendor〜page.b.js
• page.b.js
• main.js

Answer 1

如果使用的是HtmlWebpackPlugin（3.2.0）的最新版本，请考虑将其升级到支持多个条目的beta版本（4.0.0 -8）。新版本将自动包含由webpack拆分的块。

new HtmlWebpackPlugin({
 template: `${paths.src}/template/pages/main.pug`,
 filename: 'main.html',
 chunks: ['main']
}),

如果不选择升级到Beta版本，那么您必须创建静态供应商块并将HtmlWebpackPlugin道具中包含所有块：

new HtmlWebpackPlugin({
 template: `${paths.src}/template/pages/main.pug`,
 filename: 'main.html',
 chunks: ['main', 'vendor~main']
}),