SplitChunksPlugin配置

我们之前打包lodash文件想把文件名改为纯净的lodash.js。接下来我们看一下SplitChunksPlugin的一些配置，来实现这个需求。
首先我们打开webpack的官方网站，然后找到SplitChunksPlugin，把示例代码复制一下，粘到我们项目中。

splitChunks: {
    chunks: "async",
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        },
    default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

我们注释掉除了cacheGroup以外的其他代码，并且把 vendors和default 置为 false
然后我们执行打包命令，会发现打包后的lodash模块名字就是 lodash.js。
所以说这里的配置项是可以影响项目中异步加载组件的模块的。

接下来我们挨个看一下上面的配置项究竟产生什么样的作用。
首先我们先把splitChunks置空，看一下能不能正常打包。

可以看到是没问题的，只不过lodash模块的文件名又变成之前的名字。
为什么没有配置任何配置项也生效呢？
因为上面我们粘贴过来的配置项是splitChunks的默认配置项。

chunk：模块引入方式

all：所有模式；async：异步引入模式；initial:同步引入模式；

minSize: 打包最小阈值

默认：30000(30kb)
满足条件才会进行代码分割

maxSize: 单个模块最大值

默认： 0
当一个模块大小超过maxSize则会尝试生成多个小模块。

minChunks: 最小引入次数

默认：1
当不满足最小引入次数时，则不进行代码分割。

maxAsyncRequests：最大同时加载模块数

默认：5
当同时加载模块数大于设置值之后，后面的模块将不再进行代码分割。
一般不进行修改。

maxInitialRequests：入口文件最大同时加载数

默认：3
当入口文件同时加载模块数大于设置值之后，后面的模块将不再进行代码分割。
一般不进行修改。

automaticNameDelimiter：组名入口名连接符

默认：~
组名与入口名之间的连接符

name: 是否使用组名+入口名的命名格式

默认：true

cacheGroup:缓存组

vendors：满足匹配第三方模块

test: 匹配目录
priority: 优先级
filename: 文件名（vendors~main.js => 组名+入口）

default: 默认模块

priority: 优先级
filename: 文件名
reuseExistingChunk：已被打包模块是否可被复用

总结

以上就是SplitChunksPlugin的常用配置，官网还有其他配置就不一一列出来了。总之，SplitChunksPlugin是webpack4的核心内容，合理的使用会使得项目体积变小，加载变快。

SplitChunksPlugin官网相关：SplitChunksPlugin官网相关

webpack4-(4)-SplitChunksPlugin配置