# webpack - 分离第三方库
因为每次都是复制了 webpack 配置改改，而没有仔细了解过 splitChunks 的运行规则。基于 webpack4 的 spiltChunks 记录一下。
# module、chunk、bundle
这三个词是 splitChunks 运行的基础。《what are module,chunk and bundle in webpack》 (opens new window)
module：就是js的模块，webpack 支持commonJS、ES6等模块化规范，简单来说就是通过
import,require语句引入的代码，独立的代码块。chunk: 是 webpack 根据功能拆分出来的一组模块，包含三种情况：
1、项目入口
entry(entry chunk)2、通过
import()动态引入的代码 (children chunk)3、通过
splitChunks拆分出来的代码 (common chunk)chunk包含着module，一般会有多个 module 也可能是一对一。
bundle：bundle 是 webpack打包之后的各个文件，一般和chunk是一对一的关系，就是对 chunk 进行编译压缩打包等处理之后的文件。
# 配置
文档说 webpack4 的默认配置如下：（然鹅，写了个 demo，发现，好像不手动配置不会生效 webpack@4.44.2, webpack-cli@4.2.0）
module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'async', // "initial"(入口) | "all"(推荐) | "async"(默认异步)
minSize: 30000, // 最小 30 kb，拆分出来的 bundle 大于 30 kb
maxSize: 0, // 最大
minChunks: 1, // 最小 chunk ，默认1，引用1次就拆分，针对 cacheGroups 里面的配置，解决代码重复引用
maxAsyncRequests: 5, // 最大异步请求数
maxInitialRequests: 3, // 最大初始化请求数
automaticNameDelimiter: '~', // chunk 名字分割符
cacheGroups: {
vendors: {
name:'vendors', // chunk 名字，字符串或者函数，不设置会按照共享的 chunks 命名
test: /[\\/]node_modules[\\/]/, // 正则：哪些模块需要拆分
priority: -10 // 缓存组优先级
},
vue: { // 手动增加的配置
name: 'vue',
chunks: 'all', // 所有
test: /[\\/]node_modules[\\/]vue/,
enforce: true // 忽略文件大小，最小 chunk 数，最大请求数，始终创建缓存组
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true // 是否使用已有的 chunk，如果当前的模块已经包含在其它的 chunk 里面了就不重复生成新的。
}
}
}
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 注意
- cacheGroups 会继承和覆盖 splitChunks 的配置项，但是 test、priority 和 reuseExistingChunk 只能用于配置缓存组；
- 配置 cacheGroups 不生效（不拆分 chunk），可能是 maxInitialRequests 到上限了；
- webpack@4 默认cacheGroups 是
vendors和default。5 是defaultVendors和default;