Webpack 4.x 使用mini-css-extract-plugin分离scss失败的坑

楼主最近从移动端转前端有段时间了，目前还是在学习和探索前端的阶段，最近一直在给一个新的项目打基础的脚手架，慢慢的学习webpack 的配置。

如题，当配置到分离css文件的时候，网上大面积的还是extract-text-webpack-plugin这个插件，但是这个插件在webpack 4.x已经用不了，各种报错啊，然后就换成了mini-css-extract-plugin这个插件。

按照网上配置写好后，配置如下：

我试了一下，打包css文件，ok没问题，能正常的分离和引用，但是当我来分离scss文件的时候，就出问题了，死活打不出css文件，分离出来的css一直是空的，如图：

css文件里面所有的样式都丢失了。然后试了几次，依旧是没有任何样式，接下来楼主就开始了，各种百度和google，都没找到解决方案，其中也看到有些人碰到了一样的问题，但是没有一个人解决。

就在我苦恼的快要吐血的时候，突然注意到我在之前的配置中添加的消除冗余css的插件purifycss-webpack，也就是上面截图中的PurifyCssWebpack这个，这个插件的这行配置是用来扫描所有html文件，然后将里面所有没有用到css样式给删掉。这时候突然好像想到了什么，二话不说，把这个插件注释掉，然后重新打包。果不其然，去掉这个插件，scss文件样式就成功分离出来：

我还一度怀疑是mini-css-extract-plugin这个插件有bug，只能分离css文件，不能分离scss和less文件，到底还是自己的问题，还是自己太菜了。

我大概想了一下原因，可能在打包过程，PurifyCssWebpack去扫描html文件，发现分离出来的scss样式，没有被html引用，然后里面的所有css样式都被删掉了，并不是没有打包成功，只是被删掉了~~~em。。。只能瞎猜一下，哈啊哈哈哈，等后面再研究研究，看看到底是啥原因导致所有样式都被删除了。

先这样，把这个新手踩的坑记录一下，毕竟也是花了两天的时间找到问题所在(吐血ing)，等后面找到具体原因在回来更新一发~~~

今天（2020-08-06）又尝试了下，果然验证了自己太菜的原因，PurifyCssWebpack这个插件的文件扫描路径没写对，之前一直是按照网上各种文档写的那样

完全没有考虑自己项目目录结构，导致根本找不到html文件，所有每次打包之后所有的css样式都被删了，正确的方式就是根据自己的实际项目文件目录来配置路径，如下：

这是自己尝试的路径配置，实际测试发现，只去扫描html文件，css同样自会被删除，为什么呢，因为的html模板中，根本就没有直接引用任何css/scss文件，打包的时候还是会被PurifyCssWebpack插件删掉，所有我有加上了实际引用css/scss文件的js、jsx文件进行扫描，果然打包之后的css样式没有再被清除。

虽然样式没有被删除了，但又有新的问题，就是PurifyCssWebpack插件的去除冗余css的作用根本没用了，不知道是我的用法不还对，还是MiniCssExtractPlugin和PurifyCssWebpack这两插件不能共用，或者是webpack 4.x之后需要有新的去除冗余css插件来配合MiniCssExtractPlugin插件使用，先到这把，后续找到解决办法再来更新。