使用html-webpack-plugin时，供应商块仅包含在第一个html文件中

Question

我想为生产设置一个webpack 4配置，它使用html-webpack-plugin来创建多个html文件。同时，我想将我的供应商库提取为单独的块，并通过使用html-webpack-plugin手动设置哪个html文件使用哪个供应商块。

我刚开始这个项目，所以目前我唯一的供应商lib是vue.js，但随着时间的推移，这将会增长。

我希望通过以下配置实现的目的是将vue js作为单个供应商lib包含在我指定的所有html文件中：chunk：HtmlWebpackPlugin中的['vendor']。

不幸的是，我的供应商包仅包含在第一个html文件中，之后它被忽略。

我还发现，我无法通过以下方式控制供应商lib的包含：chunk：['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]

将其更改为[hash]后，捆绑包被包含在所有文件中。

还更改了chunk配置如下：

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