При использовании html-webpack-plugin чанк поставщика включается только в первый html-файл

Question

Я бы хотел настроить конфигурацию webpack 4 для производства, которая использует html-webpack-plugin для создания нескольких html-файлов. В то же время я хотел бы извлечь свои библиотеки вендоров в виде отдельных чанков и вручную настроить, какой html-файл использует какой чан вендора, с помощью html-webpack-plugin.

Я только начал проект, поэтому в данный момент моя единственная библиотека поставщика - это vue.js, но со временем она будет расти.

То, чего я хочу достичь с помощью следующей конфигурации, - это просто включить vue js в качестве единой библиотеки поставщика, включенной во все html-файлы, где я указываю: chunks: ['vendor'] в HtmlWebpackPlugin.

К сожалению, мой пакет поставщиков включен только в первый HTML-файл, и после этого он игнорируется.

Я также узнал, что не могу контролировать включение библиотеки vendor следующим образом: chunks: ['vendor', 'app']. «vendor» просто игнорируется, возможно потому, что он проверяет только то, что находится в конфигурации входа.

const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MinifyPlugin = require("babel-minify-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = function (env, argv) {
  return {
    mode: 'production',
    entry: {
      vendor: ['vue'],
      app: './src/js/app/app.js',
      appCompose: './src/js/app/app-compose.js',
    },
    output: {
      path: path.resolve(__dirname, "target/dist"), // string
      filename: '[name].[contenthash:8].bundle.js'
    },
    optimization: {
      minimizer: [
        new OptimizeCSSAssetsPlugin(),
        new UglifyJsPlugin({
          test: /\.js(\?.*)?$/i,
          exclude: /(node_modules)/,
          cache: false,
          parallel: true,
          sourceMap: true,
          extractComments: true
        })
      ],
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /node_modules/,
            chunks: 'initial',
            name: 'vendor',
            enforce: true
          },
        }
      },

    },
    plugins: [
      new CleanWebpackPlugin(['target']),

      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      }),
      new MinifyPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      new HtmlWebpackPlugin({
        template: './src/pages/index/index.html',
        filename: path.resolve(__dirname, 'target/index.html'),
        chunksSortMode: "manual",
        chunks: ['vendor','app'],
      }),
      new HtmlWebpackPlugin({
        template: './src/pages/compose/index.html',
        filename: path.resolve(__dirname, 'target/compose.html'),
        chunksSortMode: "manual",
        chunks: ['vendor','appCompose'],
      }),
    ],
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
          ]
        },
        {
          test: /\.m?js$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  }
};

Ожидаемое поведение здесь заключается в том, что каждый html-файл получает поставщиков и свой собственный пакет из выходных данных. Что на самом деле происходит, так это то, что только первый html-файл получает поставщиков.

Было бы здорово иметь возможность настроить страницу следующим образом: chunks: ['vue', 'loadash', 'appCompose'), а плагин html-webpack-plugin вставляет их в файл.

Answer 1

Я понял, что, вероятно, проблема связана с типом хэша, который я хочу использовать: [contenthash: 8]

После замены на [хеш] пакет был включен во все файлы.

Также изменил конфигурацию чанка следующим образом:

vendor: {
 chunks: 'all',
 name: 'vendor',
 test: /[\\/]node_modules[\\/](vue)[\\/]/,
 enforce: true
},