如何使用Webpack4为React组件生成Vendor文件？

嘿，我来帮你搞定这件事～Webpack 4已经废弃了旧的CommonsChunkPlugin，改用更智能的内置配置来提取公共依赖，下面是具体的操作步骤：

核心思路 #

我们要通过optimization.splitChunks配置，把React、ReactDOM这类第三方依赖从业务代码里拆分出来，生成单独的vendor文件，这样可以利用浏览器缓存，提升页面加载速度。

修改你的webpack.config.js配置 #

在现有的config对象里添加optimization字段，具体配置如下：

const config = {
  entry: { 
    client: APP_DIR + '/index.js', 
  },
  output: {
    filename: '[name].bundle.dev.js',
    path: BUILD_DIR,
    publicPath : '/js/',
    chunkFilename: '[name].[chunkhash].js'
  },
  mode : 'development',
  // 新增的optimization配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/, // 匹配node_modules下的所有第三方依赖
          name: 'vendor', // 生成的vendor文件名
          chunks: 'all',
          priority: 10, // 设置更高优先级，确保第三方依赖优先被提取
          enforce: true // 强制生成这个chunk，哪怕体积很小
        }
      }
    }
  },
  module: {
    rules: [
      { 
        test: /\.(jsx|js)?$/, 
        exclude: /(node_modules\/)/, 
        use: { 
          loader: "babel-loader", 
          options: { 
            presets: ['react', 'es2015']
          }
        }
      }
      // 你原来的其他loader规则可以继续保留在这里
    ]
  }
  // 其他配置项（比如plugins等）也正常保留
};

配置项说明 #

• chunks: 'all'：对所有类型的chunk（初始加载的chunk和异步加载的chunk）都执行代码分割
• cacheGroups.vendor.test：精准匹配node_modules目录下的文件，确保只提取第三方依赖
• name: 'vendor'：指定生成的bundle文件名，最终会输出vendor.bundle.dev.js（和你output里的filename规则对应）
• priority:10：给vendor缓存组设置更高优先级，避免和其他自定义缓存组冲突
• enforce:true：强制创建这个vendor chunk，就算它的体积很小也会生成

额外提示 #

如果你用了html-webpack-plugin，它会自动把生成的vendor文件注入到你的HTML里，不用手动引入；如果没用到的话，记得在HTML里先引入vendor文件，再引入业务代码的bundle文件哦～

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