如何配置HtmlWebpackPlugin仅向依赖页面注入拆分的Vendor Chunk？

我配置了两个入口main和jira_callback，每个入口对应一个HtmlWebpackPlugin实例。main入口引入了第三方库，通过SplitChunksPlugin拆分出了独立的Vendor Chunk，但这个Vendor Chunk被错误注入到了jira_callback对应的HTML文件中，而jira_callback入口没有任何导入语句，完全不需要这个Vendor Chunk。

我的webpack.common.js配置如下：

'use strict';

import path from 'node:path';
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
import CopyPlugin from 'copy-webpack-plugin';

const __dirname = import.meta.dirname;

export default {
  entry: {
    main: './src/index.js',
    jira_callback: './src/jira-callback/index.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.m?js$/i,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage',
                  corejs: '3.37',
                  targets: 'defaults',
                  bugfixes: true,
                },
              ],
            ],
          },
        },
      },
    ],
  },
  optimization: {
    minimizer: ['...', new CssMinimizerPlugin()],
    splitChunks: {
      cacheGroups: {
        vendor: {
          name: 'vendor',
          test: /(node_modules|bower_components)[/\\](?!exceljs)/,
          priority: -10,
        },
      },
      chunks: 'all',
    },
    removeAvailableModules: true,
    sideEffects: true,
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'index.html',
      chunks: ['main'],
    }),
    new HtmlWebpackPlugin({
      template: 'src/jira-callback/index.html',
      filename: 'jira-callback/index.html',
      chunks: ['jira_callback'],
    }),
    new CopyPlugin({
      patterns: [
        {
          context: './src',
          from: './**/*.php',
        },
      ],
    }),
  ],
  resolve: {
    alias: {
      'jquery-ui': 'jquery-ui/ui/widgets',
      'jquery-ui-css': 'jquery-ui/../../themes/base',
    },
  },
};

P.S. 忽略PHP和Node.js的混搭写法……我也是不得已而为之。

解决方案 #

方法一：限制Vendor Chunk仅从main入口拆分 #

修改splitChunks的cacheGroups.vendor配置，添加chunks: 'main'，让SplitChunksPlugin只从main入口的chunk中提取第三方库，切断jira_callback与Vendor Chunk的关联：

optimization: {
  minimizer: ['...', new CssMinimizerPlugin()],
  splitChunks: {
    cacheGroups: {
      vendor: {
        name: 'vendor',
        test: /(node_modules|bower_components)[/\\](?!exceljs)/,
        priority: -10,
        chunks: 'main' // 仅处理main入口的chunk
      },
    },
    chunks: 'all',
  },
  // ...其他原有配置
},

同时在main对应的HtmlWebpackPlugin中显式指定注入vendor chunk，确保依赖的库被正确加载：

new HtmlWebpackPlugin({
  template: 'src/index.html',
  filename: 'index.html',
  chunks: ['main', 'vendor'], // 显式加入vendor chunk
}),

方法二：在jira_callback的HTML配置中排除Vendor Chunk #

如果不需要调整拆分规则，可直接在jira_callback对应的HtmlWebpackPlugin实例中添加excludeChunks配置，明确禁止注入vendor chunk：

new HtmlWebpackPlugin({
  template: 'src/jira-callback/index.html',
  filename: 'jira-callback/index.html',
  chunks: ['jira_callback'],
  excludeChunks: ['vendor'] // 禁止注入vendor chunk
}),

内容的提问来源于stack exchange，提问作者tearfur