Как оптимизировать сборку webpack html-webpack-plugin?

Question

[Антон]

Попал на один проект. Делаю фронт. Заметил такую вещь: собирается проект довольно долго. Полная сборка - несколько минут, hot-reload - минуту. Решил глянуть в чем дело и вот что обнаружилось:
Проект сделан так, что каждая физическая страница определена отдельным:

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

Сейчас в проекте больше 40 страниц. И в target-папке выходит 40 бандлов....
Есть подключаемые либы:

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'
      })

Соответственно, в каких бандлах либы используются, туда вебпак их и собирает. Например, если jQuery используется в 30ти бандлах, так он 30 раз её и соберет...

Я глянул размер target-папки.... 175 мегабайт javascript-кода в неминифицированной версии.

Пример конфигов

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()
);

Подскажите, как сконфигурировать webpack так, чтобы он отдельным бандлом собирал общие либы и потом просто подключал их в каждый бандл страницы.

Answer 1

[Антон]

Решение для webpack 3:

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

Для 4-го другой такой же плагин.