之前总结的代码分割都是针对JS代码的，如果要对CSS代码进行代码分割，要怎么办呢？借助MiniCssExtractPlugin插件
- 在我们没有配置这个插件的时候，
webpack是怎么对css代码进行打包的呢？我们来试一下
image.png
- 然后运行打包命令
npm run dev-build
image.png - 然后运行代码会发现，样式生效了。由此可以得知，
webpack在打包的时候，它会把CSS文件直接打包到JS文件里。这也就是我们常听说的CSS IN JS这样一个概念
但是这并不是我们希望的，我们希望的是，在打包生成代码的时候，如果我们引入的是CSS文件，那么把CSS文件单独打包到dist目录下，生成一个CSS文件，而不是打包到js文件里，这个时候，我们就要借助MiniCssExtractPlugin插件了；具体的使用步骤如下：
- 先安装
npm install --save-dev mini-css-extract-plugin
-
安装好以后，要配置一下
webpack.common.js
image.png
image.png -
然后我们用
MiniCssExtractPlugin.loader来代替style.loader
image.png -
然后我们运行一下打包命令
npm run build,发现仍然没于对CSS做单独的打包
image.png -
分析下原因，可能是下边几个因素造成的，之前我们在
webpack.dev.js里做了下边的配置
image.png -
这个参数是给
tree shaking使用的。在做tree shaking的时候，webpack会对所有的模块都去tree shaking，但是有些模块我们不希望进行tree shaking，所以我们配置了usedExports: true，然后在package.json里，我们就可以在sideEffects去写一些内容来代替false值。
image.png -
之前
tree shaking对我们引入的style.css起了作用，发现我们虽然引入了文件，但是并没于使用它，所以直接就把style.css给干掉了，所以要解决这个问题，我们要对tree shaking做一下修改。
image.png -
还有就是，之前我们把
tree shaking的配置写在了dev开发环境里，实际上我们应该写在common这里，因为不管是线上代码，还是本地测试代码，我们都需要，使用这个参数来告诉我们的webpack，有一些css文件不要去做tree shaking的处理，所以，我们需要把usedExports: true从dev里剪切到common里
image.png -
然后我们再运行打包
npm run build，发现可以单独对CSS进行打包了
image.png
还可以对MiniCssExtractPlugin插件进行更详细的配置
- 然后运行打包命令，发现打包生成的CSS文件的文件名，还是走的
filename这个配置，而不是chunkFilename这个配置。也就是说，打包生成的CSS文件，如果是直接被页面引用，那么在使用这个插件的时候，就会走filename这个配置。如果是间接要被引用的CSS文件，就会走chunkFilename这个配置
image.png - 如果我们再增加一个CSS文件，并引入到index.js文件里，进行打包，那么
webpack会把这两个CSS文件的内容合并到一起。
image.png
image.png
image.png
虽然我们实现了打包单独生成CSS文件，但是我们可以看到，生成的文件代码并不是压缩状态的。如果我们希望单独生成CSS文件是压缩状态的，可以用`optimize-css-assets-webpack-plugin这个插件
- 先安装
npm install --save-dev optimize-css-assets-webpack-plugin
-
然后引入和配置
image.png
image.png - 然后我们再运行打包
npm run build,发现它不单单帮我们把样式做了合并，还把代码做了压缩显示在了一行
image.png
更高级的用法
-
之前我们是在只有一个入口文件的情况下，对CSS文件进行单独的打包和压缩。如果我们现在有多个入口文件，并且我们希望所有的入口文件引入的CSS文件都能够打包生成到一个CSS样式文件里。该怎么做呢？
image.png - 看官方文档可以知道，我们现在使用的
MiniCssExtractPlugin这个插件，它的底层也是借助了splitChunks这个插件的。我们可以在cacheGroups组里额外增加一个组叫做styles,只要发现打包的文件是CSS为后缀的文件，那么不管它是同步加载的还是异步加载的文件，统一的都把它打包到名字叫做styles的文件里去。
enforce:true的意思是，忽略掉默认的一些参数，比如说minSize，maxSize等。这些参数都不管，只要是一个CSS文件，就会做代码的拆分,把代码分割到名字叫做styles的文件里去。
image.png
如果我们想根据入口文件的不同，把CSS文件打包到不同的CSS文件里边去，该怎么办？
