Webpack 4代码分割迁移：原CommonsChunkPlugin配置转新版配置咨询

Hey there! 我帮你把Webpack 3的代码分割配置转换成Webpack 4的写法，Webpack 4把代码分割的逻辑都整合到optimization选项里了，不需要再用CommonsChunkPlugin啦，下面是具体的转换方案：

旧Webpack 3配置回顾 #

你之前的核心配置是这样的：

entry: { 
  main: './src/app.js', 
  vendor: ['babel-polyfill','react','react-dom',"jquery","bootstrap"] 
},
plugins: [
  new webpack.HashedModuleIdsPlugin(),
  new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }),
  new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' })
]

这个配置的作用是：

• 把第三方依赖抽成单独的vendor chunk
• 抽离Webpack运行时代码到manifest chunk，避免哈希不稳定
• 用HashedModuleIdsPlugin稳定模块ID，防止文件哈希频繁变化

对应的Webpack 4配置 #

Webpack 4用optimization.splitChunks和optimization.runtimeChunk替代了CommonsChunkPlugin，同时内置了模块ID哈希的配置，不需要单独实例化插件了。完整配置如下：

entry: { 
  main: './src/app.js' 
  // 不需要单独写vendor入口了！splitChunks会自动提取第三方依赖
},
optimization: {
  // 替代HashedModuleIdsPlugin，稳定模块ID哈希
  moduleIds: 'hashed',
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      // 抽离第三方依赖到vendor chunk，对应旧配置的vendor CommonsChunkPlugin
      vendor: {
        test: /[\\/]node_modules[\\/]/, // 匹配node_modules里的模块
        name: 'vendor',
        chunks: 'all'
      }
    }
  },
  // 抽离Webpack运行时代码到单独的runtime chunk，对应旧配置的manifest CommonsChunkPlugin
  runtimeChunk: 'single'
}

关键变化说明 #

1. 移除vendor入口：Webpack 4的splitChunks会自动扫描所有chunk中的第三方依赖，不需要手动在entry里定义vendor数组
2. 替代HashedModuleIdsPlugin：直接用optimization.moduleIds: 'hashed'即可，Webpack 4内置了这个功能
3. splitChunks替代CommonsChunkPlugin：cacheGroups.vendor的配置就是把node_modules里的所有依赖抽成单独的vendor.js文件
4. runtimeChunk替代manifest CommonsChunkPlugin：runtimeChunk: 'single'会把Webpack的运行时代码抽成单独的runtime.js，保证vendor chunk的哈希不会因为每次构建而变化

这样配置后，你会得到三个输出文件：

• main.[hash].js：你的业务代码
• vendor.[hash].js：所有第三方依赖（babel-polyfill、react、jquery等）
• runtime.[hash].js：Webpack运行时代码

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