output.chunkFilename和filename和vendors.name以及魔法注释webpackChunkName的区别
先只使用魔法注释，其他的均不设置，来查看效果：
我们可以看到除了main.js这个入口文件外，还打包出了两个js文件，第一个是vendors~lodash，第二个是vendors~main（并没有在Index.js中引入这个文件，但是还是打包出了，怀疑是babel的core-js\@3？）。
vendors说明这两个js文件他们都符合vendors组的条件，但是由于vendors组没有设置统一的name，所以符合vendors组的内的文件有一个分割一个，而不是统一分割在一个文件中。
另外可以看到魔法注释事实上就是决定了chunk Name的vendors~后的名字（因为在默认情况下都符合vendors组的条件），而打包出来的js文件的名字就是以chunk Name命名的。
这时我们为vendors.name设置一个值“fang”。
我们可以发现，由于设置了vendors组内的所有文件的统一名字”name”，原本的vendors~lodash和vendors~main都被统一合并打包到了fang这个Chunk中，然后这个js的文件名依旧以Chunk Name命名。值得注意的是魔法注释已经被忽视了。
接下来我们在设置一下output.chunkFilename:
可以看到，output中同时存在filename和chunkfilename，那打包出的文件应该遵从哪个呢？
尝试打包：
由此可见，filename是用来设置各个入口文件的打包文件名的。而chunkFilename则是用来设置从各个入口文件下分割出来的文件的文件名的，每一个分割文件都是一个Chunk，其中占位符[name]就是对应的chunkName。
总的来说，被分割出来的Chunks都是以自己ChunkName命名的，这个ChunkName是由魔法注释或者是optimization.splitChunks中设置的。如果没有设置output.chunkFilename，那么现在的这个名字就是最终的名字，如果有设置output.chunkFilename，那么这个名字就会被再次包装（一般都用[name].xxx.js）成为最终的文件名。
当所有的入口文件中分割出好多个Chunk文件时，output中只有一个固定filename,则会发生报错。
此时解除vendors.name，让他分割出两个Chunk。
然后设置output.chunkfilename:chunk.js后进行打包，webpack就会显示报错：
webpack分割CSS文件
想要分割css文件，就需要借助插件mini-css-extract-plugin
需要注意的是，treeshaking会把index.js中引入的css文件直接干掉，所以我们应该现在package.json中配置好sideEffect。（先跟将TreeShaking的配置移动到common环境下，之后我尝试将sideEffect去掉，或者设置为false，mini-css-extract-plugin都能正常的作出css分割。不知道为什么？）
然后就会发现css代码被分割出去,index.html中也自动link了这个main.css文件。
在mini-css-extract-plugin中也有很多配置：
比如filename和chunkFilename就是决定打包生成的css文件的文件名称的。那filename和chunkFilename的区别是什么？
补充：
然后将style-loader替换为MiniCssExtractPlugin.loader，如果要分割sass/less/stylus也是一样，只要把style-loader替换即可。
所以可以看到，mini-css-extract-plugin可以将同一个入口文件中所有同步引入的css打包至同一个css文件中。
但是此时还没有满足我们的需求，打包出来的css文件没有被自动压缩，如果我们需要压缩css，我们就需要使用另一个官方提供的插件。
具体配置方法极其不容易记住，就参阅文档吧。
https://webpack.js.org/plugins/mini-css-extract-plugin/
压缩之后的css代码张这个样子：
关于css的代码分割，底层其实也是经过splitChunks的一些配置的，这些配置可以决定很多打包css的方式，比如多个入口文件的css都打包到一个css文件中等。
详见官网：
https://webpack.js.org/plugins/mini-css-extract-plugin/
下图是多个css打包进一个css文件中的基础配置，可以看到其实也是通过splitChunks实现的：
