Как добавить отдельные скрипты вендора на разные страницы в многостраничном проекте 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 соответственно? И вендор ~ main.js добавляется ко всем трем?

Как это:

main.html

• вендор ~ 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), рассмотрите возможность обновления до бета-версии (4.0.0 -8), которая поддерживает несколько записей. новая версия будет автоматически включать чанки, разделенные веб-пакетом.

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

Если обновление до бета-версии не является вариантом, вам нужно создать статические чанки вендора и включить все чанки в реквизиты HtmlWebpackPlugin:

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