根据爆栈网回答整理:webpack-4-create-vendor-chunk

在 webpack3 配置中,我们像下面这样创建一个分离的 vendor.js chunk

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
entry: {
    client: ['./client.js'],
    vendor: ['babel-polyfill', 'react', 'react-dom', 'redux']
},
output: {
    filename: '[name].[chunkhash].bundle.js',
    path: '../dist',
    chunkFilename: '[name].[chunkhash].bundle.js',
    publicPath: '/'
},
plugins: [
    new webpack.HashedModuleIdPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor'
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'runtime'
    })
]

但在 webpack4 中,commonChunksPlugin 被废弃了,使用如下配置也可以达到同样的效果

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
entry: {
 vendor: ['react', 'react-dom', 'react-router'],
 app: paths.appIndexJs
},
optimization: {
 splitChunks: {
  cacheGroups: {
    // match the entry point and spit out the file named here
    vendor: {
      chunks: 'initial',
      name: 'vendor',
      test: 'vendor',
      filename: 'vendor.js',
      enforce: true,
    },
  },
 },
},