Как подключать разные вендорные скрипты для разных страниц в Webpack?

Question

[dannyfromtheblock]

У меня мультистраничный проект, который собирается Webpack'ом.

В конфиге указал несколько точек входа:

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
  

Сами страницы создаются следующим образом:

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 подключались соответственно своим страницам? А 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

[whiteua]

Думаю, подойдёт это решение решение