Webpack4生产配置：多页面下vendor chunk仅首个HTML引入问题及需求

我来帮你搞定这个多页面配置的坑，之前我在做类似项目的时候也碰到过一模一样的问题，咱们一步步拆解原因并修复：

问题根源分析 #

你现在的问题主要来自两个配置冲突和功能限制：

1. 重复的Vendor配置：你在entry里手动声明了vendor: ['vue']，同时又在splitChunks的cacheGroups里定义了vendor规则，这会让Webpack的chunk解析逻辑混乱，导致只有第一个HTML文件能正确识别vendor chunk，后续页面会因为chunk名称冲突或依赖跟踪失败而无法引入。
2. 单一Vendor Chunk限制：当前的splitChunks把所有第三方库打包成一个大的vendor chunk，没办法实现你想要的chunks: ['vue','lodash','appCompose']这种按需指定单个库chunk的需求。

分步解决方案 #

1. 先删掉entry里的手动Vendor配置 #

首先把entry里的vendor: ['vue']删掉，splitChunks会自动帮我们从node_modules里提取第三方依赖，手动声明这个entry完全是画蛇添足，反而会干扰Webpack的chunk生成逻辑。

2. 修改splitChunks，拆分单个第三方库为独立Chunk #

调整optimization.splitChunks的配置，让每个第三方库都生成单独的chunk，这样你就能在HtmlWebpackPlugin里精准指定要引入的库：

optimization: {
  minimizer: [
    new OptimizeCSSAssetsPlugin(),
    new UglifyJsPlugin({
      test: /\.js(\?.*)?$/i,
      exclude: /(node_modules)/,
      cache: false,
      parallel: true,
      sourceMap: true,
      extractComments: true
    })
  ],
  // 生成单独的runtime chunk，用来管理模块依赖映射，避免缓存失效问题
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      // 拆分每个node_modules里的包为单独chunk
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name(module) {
          // 从模块路径里提取包名，比如从`node_modules/vue/dist/vue.esm.js`拿到`vue`
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
          // 处理@开头的包，比如@vue/reactivity变成vue-reactivity
          return `npm.${packageName.replace('@', '')}`;
        },
        chunks: 'initial',
        priority: -10
      },
      // 可选：拆分多个业务chunk共用的代码
      common: {
        name: 'common',
        minChunks: 2,
        chunks: 'initial',
        priority: -20,
        reuseExistingChunk: true
      }
    }
  },
},

这段配置生效后，vue会生成类似npm.vue.xxxx.bundle.js的文件，后续添加的lodash会生成npm.lodash.xxxx.bundle.js，完全满足你按需指定的需求。

3. 配置HtmlWebpackPlugin的chunks参数 #

现在你可以直接在每个HtmlWebpackPlugin实例里指定需要引入的chunk了，包括单个第三方库和业务chunk：

plugins: [
  // ...其他插件保持不变
  new HtmlWebpackPlugin({
    template: './src/pages/index/index.html',
    filename: path.resolve(__dirname, 'target/index.html'),
    chunksSortMode: "auto", // 让Webpack自动处理chunk加载顺序
    // 直接指定要引入的vue和app业务chunk
    chunks: ['npm.vue','app'],
  }),
  new HtmlWebpackPlugin({
    template: './src/pages/compose/index.html',
    filename: path.resolve(__dirname, 'target/compose.html'),
    chunksSortMode: "auto",
    // 后续加了lodash的话，直接在这里加'npm.lodash'就行
    chunks: ['npm.vue','appCompose'],
  }),
],

4. 懒人优化：让Webpack自动引入依赖的Vendor #

如果你不想手动维护每个页面的vendor列表，可以只指定业务chunk，Webpack会自动帮你引入它依赖的所有vendor chunk：

new HtmlWebpackPlugin({
  template: './src/pages/index/index.html',
  filename: path.resolve(__dirname, 'target/index.html'),
  chunksSortMode: "auto",
  chunks: ['app'], // 只写业务chunk，Webpack自动引入它依赖的vue
}),

这个方案更省心，后续添加新的第三方库也不用修改HtmlWebpackPlugin的配置。

最终完整配置 #

这里是调整后的完整Webpack配置，直接替换你的现有配置即可：

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 UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = function (env, argv) {
  return {
    mode: 'production',
    entry: {
      // 移除了手动的vendor配置
      app: './src/js/app/app.js',
      appCompose: './src/js/app/app-compose.js',
    },
    output: {
      path: path.resolve(__dirname, "target/dist"),
      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
        })
      ],
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
              return `npm.${packageName.replace('@', '')}`;
            },
            chunks: 'initial',
            priority: -10
          },
          common: {
            name: 'common',
            minChunks: 2,
            chunks: 'initial',
            priority: -20,
            reuseExistingChunk: true
          }
        }
      },
    },
    plugins: [
      new CleanWebpackPlugin(['target']),
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
      }),
      new webpack.NoEmitOnErrorsPlugin(),
      new HtmlWebpackPlugin({
        template: './src/pages/index/index.html',
        filename: path.resolve(__dirname, 'target/index.html'),
        chunksSortMode: "auto",
        chunks: ['app'],
      }),
      new HtmlWebpackPlugin({
        template: './src/pages/compose/index.html',
        filename: path.resolve(__dirname, 'target/compose.html'),
        chunksSortMode: "auto",
        chunks: ['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']
            }
          }
        }
      ]
    }
  }
};

关键注意点 #

• 一定要删掉entry里的vendor配置，这是解决多个页面无法引入vendor的核心，两个地方的vendor定义会让Webpack的chunk依赖跟踪混乱。
• 拆分单个第三方库的配置让你可以完全掌控每个页面加载的资源，后续扩展库的时候非常灵活。
• runtimeChunk不仅能帮你自动管理依赖，还能解决contenthash缓存失效的问题，建议始终开启。

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