How to optimize webpack build of html-webpack-plugin?

Question

Frontend

Got on one project. I'm doing the front. I noticed such a thing: the project is going for quite a long time. Full assembly - a few minutes, hot-reload - a minute. I decided to look what was the matter and this is what I found:
The project is made in such a way that each physical page is defined as a separate one:

new HtmlWebpackPlugin({
        filename: 'my-page/index.html',
        template: './sources/my-page/index.html',
        chunks: ['my-page', 'common'],
        hash: true
      })

Now the project has more than 40 pages. And there are 40 bundles in the target folder....
There are plug-in libs:

new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        toastr: 'toastr',
        moment: 'moment-timezone',
        Highcharts: 'highcharts',
        html2canvas: 'html2canvas',
        Highcharts3D: 'highcharts/highcharts-3d',
        HighchartsExporting: 'highcharts/modules/exporting',
        HighchartsDrilldown: 'highcharts/modules/drilldown.js',
        tinycolor: 'tinycolor2'
      })

Accordingly, in which bundles the libs are used, the webpack collects them there. For example, if jQuery is used in 30 bundles, then it will build it 30 times...
I looked at the size of the target folder.... 175 megabytes of javascript code in the unminified version.

Config example

const HtmlWebpackPlugin = require('html-webpack-plugin');
const commonConfig = require('./webpack.common.js');
const moduleESLint = require('./module.eslint.js');
const webpackMerge = require('webpack-merge');
const moduleStyle = require('./module.style');
const webpack = require('webpack');
const glob = require('glob');

const ENV = 'prod';

/**
 * Определяем настройки сжатия HTML-страниц
 * @type {{}}
 */
const htmlMinifierOptions = {
  collapseWhitespace: true,
  html5: true,
  ignoreCustomComments: true,
  minifyCSS: true,
  minifyJS: true,
  removeAttributeQuotes: true,
  removeComments: true,
  removeEmptyAttributes: true,
  removeRedundantAttributes: true
};

const productionConfig = {
  entry: glob.sync('./sources/**/*-component.js').reduce((entries, entry) => Object.assign(entries, {
    [entry.split('/').pop().replace('.js', '').replace('-component', '')]: entry
  }), {}),

  output: {
    filename: '[name]/[name].bundle.js',
    path: [__dirname, '/../target/'].join()
  },

  plugins: [
    new HtmlWebpackPlugin({
      filename: 'p1/index.html',
      template: './sources/p1/index.html',
      chunks: ['p1', 'common'],
      minify: htmlMinifierOptions,
      contextPort: '',
      dictionaryContextPort: '',
      favoriteListContextPort: '',
      registryListContextPort: '',
      hash: true
    }),

  // ... more HtmlWebpackPlugin

    new webpack.LoaderOptionsPlugin({
      minimize: false,
      debug: true
    })
  ]
};

module.exports = webpackMerge(
  commonConfig({env: ENV}),
  productionConfig,
  moduleESLint(),
  moduleStyle()
);

Tell me how to configure webpack so that it collects common libs in a separate bundle and then simply connects them to each bundle of the page.

Answer 1

Solution for webpack 3:

new webpack.optimize.CommonsChunkPlugin({
        name: 'common',
        minChunks: 2
      })

For the 4th another same plugin.