Как подключить и правильно разбить библиотеки на чанки?

Question

[Кирилл Карпик]

Здравствуйте. Учусь вебпаку. Есть несколько entry файлов и библиотеки, некоторые подключаются только на одной странице, а другие на нескольких страницах. Хочется максимально рационально все подключить: каждая страница подключает свой скрипт (index.html с index.js, about.html с about.js и тд), библиотеки, подключаемые на каждой странице (например jquery), объединить в vendor.js или что-то подобное и библиотеки, подключаемые индивидуально (например moment), оставить в отдельных файлах (либо совсем по умному - создать файлы с библиотеками, используемые только в паре).

const webpack =  require("webpack");
const fs = require("fs");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const PAGES_DIR = `${PATHS.src}/html`;
const PAGES = fs.readdirSync(PAGES_DIR);

module.exports = {
  entry: {
    a: "./src/js/a.js",
    b: "./src/js/b.js",
    c: "./src/js/c.js"
  },
  output: {
    filename: "./assets/js/[name].[hash].js",
    path: "./dist",
    publicPath: "/"
  },
  optimization: {
    runtimeChunk: "single",
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          filename: `./assets/js/[name].[hash].js`,
          chunks: 'all'
        }
      },
    },
  },
  module: {
    rules: [
      // все загрузчики
    ]
  },
  plugins: {
    // вспомогательные плагины
    new webpack.providePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
    }),
    ...PAGES.map(page => new HtmlWebpackPlugin({
      template: `${PAGES_DIR}/${page}`
    }))
  }
}

Буду рад любому способу реализации (включая способы сделать по другому, что с технической части все равно будет хорошо).