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

【问题标题】：Vendor chunk is included only in the first html file when using html-webpack-plugin使用 html-webpack-plugin 时，供应商块仅包含在第一个 html 文件中
【发布时间】：2019-09-09 14:52:50
【问题描述】：

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

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

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

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

我还发现，我无法通过以下方式控制供应商库的包含：块：['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 将它们注入到文件中。

【问题讨论】：

标签： webpack webpack-4 html-webpack-plugin webpack-splitchunks

【解决方案1】：

我发现问题可能是由我想要使用的哈希类型引起的： [contenthash:8]

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

还改变了块配置如下：

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

【讨论】：