头疼：重复引用第三方库
在多入口文件打包的时候，出现了重复引入第三方库的问题，如下：
怎么办：怎么抽取公共模块
在 webpack4 之前，都是利用 CommonsChunkPlugin 插件来进行公共模块抽取。
到了 webpack4 之后，利用了 SplitChunksPlugin 插件来进行公共模块抽取，所以以下只针对 SplitChunksPlugin 插件进行说明。
默认配置
开箱即用的插件，默认情况下只对按需块（异步块）有影响。
不用另外引入 SplitChunksPlugin插件，以下是其默认配置：
module.exports = {
optimization: {
splitChunks: {
chunks: "async",// all async initial
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: "~",
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
},
};
先来了解下几个属性说明
chunks
chunks 属性可选all、async、initial或是自己匹配chunk名称。
async 表示异步块，如通过以下形式引入的
import("@/views/home");
initial 表示非异步块，如入口处的配置，这里的非异步快有三个，index、main、other
module.exports = {
entry: {
index: "./src/index.js",
main: "./src/main.js",
other: "./src/other.js"
}
};
cacheGroups
缓存组，这里是我们表演的舞台，抽取公共模块什么的，都在这个地方
priority
优先级，只配置在缓存组的每一项，决定执行的顺序。
minChunks
最小块，即当块的数量大于等于minChunks时，才起作用
minSize
最小大小，即当抽取的公共模块的大小，大于minSize所设置的值，才起作用
test
匹配规则，说明要匹配的项
开始表演：抽取公共模块
直接上配置：
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
name: "vendor",
test: /[\\/]node_modules[\\/]/,
chunks: "all",
priority: 10 // 优先级
},
common: {
name: "common",
test: /[\\/]src[\\/]/,
minSize: 1024,
chunks: "all",
priority: 5
}
}
}
},
};
这里我配置了两个缓存组，即 vendor 和 common
-
vendor: 抽取来自node_modules文件夹下的第三方代码，优先级权重为10 -
common: 抽取来自src文件夹下的代码，优先级权重为5 -
vendor比common的优先级权重高，所以先提取vendor，再提取common
打包
做好以上配置之后，打包的结果如下：
- 在入口文件引用的第三方文件（这里我用了
lodash来测试）被打包到vendor.js - 在入口文件引用到的公共文件（这里我用了自己写的util.js）被打包到
common.js
注意
这里还需要注意的是，公共引用的css文件，本来我是用了extract-text-webpack-plugin插件抽取到单独的文件，因为css文件也有公共引用，所以也被 SplitChunksPlugin 插件抽取成公共模块打包到了common.css文件。
关于打包文件名
output.chunkFilename这里配置的就是非入口文件的文件名
splitChunks.cacheGroups.{cacheGroup}.filename 更细的配置可以参考这里
关于顺序
在cacheGroups里，由priority决定抽取公共代码的顺序，priority值越大，就先执行。
cacheGroups里抽取公共代码的部分完成之后，再执行cacheGroups外的抽取公共代码部分。
阅读
