共计 1184 个字符，预计需要花费 3 分钟才能阅读完成。
学习 webpack4 – 基础配置学习 webpack4 – HTML 处理学习 webpack4 – 样式处理学习 webpack4 – ES6 语法转化学习 webpack4 – 第三方模块的使用学习 webpack4 – 抽离公共代码
… 持续中
=======================================================
抽离公共代码
我们在开发多个页面的项目的时候，有时候会在几个页面中引用某些公共的模块，这些公共模块多次被下载会造成资源浪费，如果把这些公共模块抽离出来只需下载一次之后便缓存起来了，这样就可以避免因重复下载而浪费资源，那么怎么在 webpack 中抽离出公共部分呢？方法如下：
公共模块抽离
举例：
项目中分别有 a.js, b.js, page1.js, page2.js 这四个 JS 文件，page1.js 和 page2.js 中同时都引用了 a.js, b.js，这时候想把 a.js, b.js 抽离出来合并成一个公共的 js，然后在 page1, page2 中自动引入这个公共的 js，怎么配置呢？如下：
配置 webpack.config.js 文件：
module.exports = {
//…
// 优化项配置
optimization: {
// 分割代码块
splitChunks: {
cacheGroups: {
// 公用模块抽离
common: {
chunks: ‘initial’,
minSize: 0, // 大于 0 个字节
minChunks: 2 // 抽离公共代码时，这个代码块最小被引用的次数
}
}
}
}
}
完成！
第三方模块抽离
页面中有时会引入第三方模块，比如 import $ from ‘jquery’; page1 中需要引用，page2 中也需要引用，这时候就可以用 vendor 把 jquery 抽离出来，方法如下：
module.exports = {
//…
// 优化项配置
optimization: {
// 分割代码块
splitChunks: {
cacheGroups: {
// 公用模块抽离
common: {
chunks: ‘initial’,
minSize: 0, // 大于 0 个字节
minChunks: 2, // 在分割之前，这个代码块最小应该被引用的次数
},
// 第三方库抽离
vendor: {
priority: 1, // 权重
test: /node_modules/,
chunks: ‘initial’,
minSize: 0, // 大于 0 个字节
minChunks: 2, // 在分割之前，这个代码块最小应该被引用的次数
}
}
}
}
}
注意：这里需要配置权重 priority，因为抽离的时候会执行第一个 common 配置，入口处看到 jquery 也被公用了就一起抽离了，不会再执行 wendor 的配置了，所以加了权重之后会先抽离第三方模块，然后再抽离公共 common 的，这样就实现了第三方和公用的都被抽离了。
不加权重之前：jquery 也被抽离到了公共 js 里
加了权重之后：
