Webpack 3迁移至Webpack 4求助：自定义Vendor Chunk拆分规则

我来帮你搞定这个迁移需求！Webpack 4 用全新的 splitChunks 替代了旧版的 CommonsChunkPlugin，咱们可以通过精准配置实现「仅第一个入口的依赖打包到 Vendor Chunk，第二个入口依赖全留在自身 bundle」的效果，具体步骤如下：

1. 基础入口配置 #

首先保持入口的定义和 Webpack 3 类似，明确两个入口文件：

const path = require('path');

module.exports = {
  // Webpack 4 必须指定模式，自动启用对应环境的优化
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: {
    entry1: './src/entry1.js', // 第一个入口，依赖将抽去 Vendor
    entry2: './src/entry2.js'  // 第二个入口，所有依赖留在自身 bundle
  },
  output: {
    filename: '[name].[contenthash].js', // 用 contenthash 做缓存优化
    path: path.resolve(__dirname, 'dist')
  },
  // 其他 loader 配置（比如 babel、css 等）按需保留，确保兼容 Webpack 4
}

2. 核心：配置代码拆分规则 #

Webpack 4 的代码拆分全部通过 optimization.splitChunks 实现，咱们通过缓存组（cacheGroups）精准控制哪些模块进入 Vendor：

module.exports = {
  // 上面的基础配置...
  optimization: {
    // 提取 Webpack 运行时代码，避免 Vendor Hash 无故变化（最佳实践）
    runtimeChunk: {
      name: 'runtime'
    },
    splitChunks: {
      chunks: 'all', // 先开启对所有类型 chunk 的处理
      cacheGroups: {
        // 定义 Vendor Chunk，仅处理 entry1 的第三方依赖
        vendor: {
          name: 'vendor',
          // 核心规则：只从 entry1 这个入口的 chunk 中抽取模块
          chunks: chunk => chunk.name === 'entry1',
          // 匹配 node_modules 中的第三方依赖
          test: /[\\/]node_modules[\\/]/,
          priority: 10, // 优先级高于默认缓存组，确保优先抽取
          enforce: true // 强制抽取，即使模块大小未达默认阈值
        },
        // 禁用默认的公共代码抽取组，避免 entry2 的依赖被意外拆分
        default: false,
        defaultVendors: false
      }
    }
  }
}

3. 关键配置说明 #

• chunks: chunk => chunk.name === 'entry1'：这是实现需求的核心，它限制了 Vendor 缓存组只处理 entry1 对应的模块，完全不会碰 entry2 的依赖。
• test: /[\\/]node_modules[\\/]/：确保只有第三方依赖会被抽到 Vendor，自己写的业务代码不会被拆分进去。
• 禁用默认缓存组：Webpack 4 默认会自动抽取多个入口的公共代码，咱们关掉 default 和 defaultVendors，就能保证 entry2 的所有依赖都留在自己的 bundle 里。

4. 迁移注意事项 #

• 升级 Webpack 到 4.x 版本，同时确保你的 loader（比如 babel-loader、css-loader）都兼容 Webpack 4，避免版本冲突。
• Webpack 4 的 mode 配置会自动启用很多优化：production 模式下自动压缩代码、启用 tree-shaking；development 模式下保留源码映射和调试信息。
• 如果之前用了 UglifyJsPlugin，Webpack 4 已经内置了 TerserPlugin，只需设置 optimization.minimize: true 即可开启代码压缩（production 模式下默认开启）。

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