根据爆栈网回答整理: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,
},
},
},
}, |