一、Tree Shaking的概念
1. 如果设置了此配置，可以不用在js文件中单独引入polyfill
2. Tree Shaking (只支持ES module这种静态导入的方式导入) 对一些用到的包才打包，没有用到的代码不打包
概念：最理想的方式是我引用什么，打包什么，tree shaking就是摇掉没用的东西
因为它是静态引入，CommonJS是动态引入。
3. 如何添加tree shaking ？
3.1 在开发环境下
然后还需要在package.json中设置
最终 development情况下是这样
3.2 如果设置mode:'production'下：（会自动写好optimization，不需要在webpack配置中单独添加）
就只会引入使用的，没有使用的就不会引入，减少压缩内存
3.3 额外需要注意的是： 有些情况下会遇到一个问题
3.3.1 例如pollyfill没有导出任何文件，但是又需要它，可能会出问题，可以对需要特殊处理的添加到此处，这样tree shaking就不会过滤掉它，会正常引入
3.3.2 还有例如css文件也需要正常引入，这样tree shaking就不会过滤它
二、 Development和Production模式的区分打包
我们创建两份webpack打包环境
开发版本 webpack.dev.js
上线版本 webpack.prod.js （代码一般是压缩过的代码）
然后在package.json中两份脚本
由于开发和上线版本的配置文件存在大量相同的代码，可以提取出一个webpack.common.js中,并
引入一个合并模块
- npm i webpack-merge -D
- 提取相同的代码
1.3 合并
1.4 重新改下配置文件
三、Webpack和Code Spliting
1. 使用dev环境打包一次 遇到一个问题，
2 问题1.打包生成的东西放到了build下？
解决办法：
3 问题2.清除上一次打包文件出错，解决办法：
清除root下的dist下的所有文件
、、、、webpack的插件特别的多，再出了问题的时候，到google或者overflowstack上找问题、、、
4. code spliting是什么？
4.1 场景1： npm install loadash --save （一个字符串库）
4.2 问题1：会遇到一个问题，打包完以后，如果不做压缩和代码阉割，那么代码量会非常大。
4.3 问题2：由于第三方库代码更新概率不高，但是业务代码会不断迭代，就导致每次都要把第三方库打包进去。
4.4 解决办法1：手动思考如何阉割
1.创建一个loadsh.js
- 正常写业务逻辑
- 再次配置webpack
两种方式对比：
4.5 解决办法2：自动阉割
只需要在webpack中添加一个配置项
4.6 解决办法3：异步加载
用异步的方式写
安装动态引入包的插件
然后配置一下，使得babel可以去处理这种异步语法
打包完以后，会把异步的代码放到一个单独的文件里面
小结
代码分割，和webpack无关
webpack中实现代码分割，两种方式
- 同步代码： 只需要在webpack.common.js中做optimization的配置即可
- 异步代码(import)： 异步代码，无需做任何配置，会自动进行代码的分隔，放置到新的文件中
四、 SplitChunksPlugin配置参数详解
1 demo
- 这一次，我们移出上述说的分割插件，使用一个官方提供的动态引入的插件
安装和配置
重新打包 （magiccommon语法，引入这个文件后打包后的名称为）
- 发现问题，上述文件名怎么前面加了wendors
解决
再次打包
2 参数讲解
- chunks: 'async'
支持异步导入，同步导入不支持
1.1 只设置chunks: 'all'
依然不会做代码的分割。
1.2 进行如下设置
引入同步的库，会判断chunks: 'all，然后会进入cacheGroups下面，判断引入的库在不在vendors里面，
1.3 问题： 名字存在个venders~main
解决办法： cacheGroups - minSize: 30000 只有包大于30k这个程度才会进行代码分割。
- 对于非node_modules下同步引入的一些模块 比如import Test from './Test'
- minChunks: 2
一个包同时被引入的此处大于大于2时才对这个包分割打包 - maxAsyncRequests: 5
异步加载的模块最大数为5，最多分割数为前5个，超出部分不分割
6 maxInitalRequests: 3
入口文件开始加载的时候，入口文件最多能分割3个，超过部分不分割 
