Webpack 4 - 创建供应商块 [英] Webpack 4 - create vendor chunk
问题描述
在 webpack 3 配置中,我将使用以下代码创建单独的 vendor.js
块:
In a webpack 3 configuration I would use the code below to create separate vendor.js
chunk:
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.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime',
}),
],
我不知道如何使用 Webpack 4 进行所有更改.我知道 CommonChunksPlugin
已被删除,因此有一种不同的方法可以实现.我还阅读了本教程,但我仍然不确定如何提取运行时块并正确定义输出
属性.
With all the changes I'm not sure how to do it with Webpack 4. I know that CommonChunksPlugin
was removed, so there is a different way to achieve that. I've also read this tutorial but I'm still not sure about extracting runtime chunk and properly defining output
property.
不幸的是,我在这里遇到了最受欢迎的答案问题.查看我的回答.
Unfortunately, I was experiencing issues with the most popular answer here. Check out my answer.
推荐答案
为了减少供应商 JS 包的大小.我们可以将节点模块包拆分为不同的捆绑文件.我提到了这个 博客 用于拆分 Webpack 生成的庞大的 vendor 文件.我最初使用的那个链接的要点:
In order to reduce the vendor JS bundle size. We can split the node module packages into different bundle files. I referred this blog for splitting the bulky vendor file generated by Webpack. Gist of that link which I used initially:
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`;
},
},
},
},
}
如果您想将多个包分组并分块到不同的包中,请参考以下要点.
If one wants to group multiple packages and chunk then into different bundles then refer following gist.
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
reactVendor: {
test: /[\/]node_modules[\/](react|react-dom)[\/]/,
name: "reactvendor"
},
utilityVendor: {
test: /[\/]node_modules[\/](lodash|moment|moment-timezone)[\/]/,
name: "utilityVendor"
},
bootstrapVendor: {
test: /[\/]node_modules[\/](react-bootstrap)[\/]/,
name: "bootstrapVendor"
},
vendor: {
test: /[\/]node_modules[\/](!react-bootstrap)(!lodash)(!moment)(!moment-timezone)[\/]/,
name: "vendor"
},
},
},
}
这篇关于Webpack 4 - 创建供应商块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!