1.entry配置手动分离
entry写成对象配置为多入口的形式，[name]则为entry中的key
2.方式一： Entry Dependencies 入口依赖(不推荐):
如图:将loadash单独打一个包，然后让index.js和main.js再分别引用loadash，避免打包出来的两个bundle.js引用两个loadash
方式二. optimization中通过splitChunks插件(webpack已经集成)设置splitChunks.chunks，帮助我们抽离依赖
如图entry中的分包都引用了lodash和dayjs， 通过splitChunks.chunks设置为all,打包后的依赖则会被抽离到232.bundle.js,而不会被打包在两个bundle.js
具体属性:
minSize(如果大于minSize才进行拆分)
maxSize(将大于maxSize的包，拆分成不小于minSize的包)
minChunks(如果引用次数大于minChunks，则进行拆分)
为什么默认的打包能够将第三方库拆分出来，就是因为cacheGroup里面定义了vendor这个缓存组，test设置为?/[/]node_modules[/]/?表示只筛选从node_modul文件夹下引入的模块，所以所有第三方模块才会被拆分出来。除此之外还有一个default缓存组，会将至少有两个chunk引入的模块进行拆分
如果一个包既匹配上vendor中的test(属于node_modules)，又被最小引入了两次，那么会根据priority优先级来判断分包到哪个组(vendor组或default组)
总结: 一般开发中只需要设置chunks: "all"即可
无论splitChunks如何设置，只要是异步导入(import懒加载)的代码，webpack都会进行代码分离
如图: entry中我们设置了main和index,那么打包出来的[name]就是main和index，但是如果我们没做设置，那么打包出来的bundle.js名称则会采用chunkIds指定的算法
optimization.chunkIds在开发环境推荐named,生产环境推荐deterministic
filename: 设置初始代码(同步代码，包括import xxx from xxx)打包出来的文件名
chunkFilename: 设置异步代码(import懒加载等)打包出来的文件名
一般filename我们用[name].bundle.js, chunkFilename我们用[name].chunk.js
在懒加载前面添加魔法注释，则webpack在进行代码分离的时候会为异步代码设置不同的名字而不会用id
