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