webpack是怎么打包css，为什么不同页面的css最终显示在一个文件？

Question

如题，今天遇到个问题，
https://segmentfault.com/q/10...为什么样式改了之后还显示之前的样式，经过@何以旧林 的一番指点之后，发现有两个页面都写了相同的类名，最终浏览器呈现的app.xxxxx.css文件出现了相互覆盖问题。
虽然最后面解决了，但是我想了解下，webpack是怎么打包的css，全部抽出来放一个文件里吗？或者哪里有相关解释的烦请指路一下，谢谢。

Answer 1

你写的是SPA应用吗?如果是SPA的话,
那你的问题,和webpack是怎么打包css没关系,而是和样式隔离有关系

比如你A文件写了

.text{ color: red; }

然后B文件也写了

.text{ color: green; }

你的本意是
在A里面,.text是红色,
在B里面,.text是绿色

但是,webpack把两个样式打包到一个css文件里了,就出现覆盖了.

就算你把webpack配置成打包到两个文件里,
那你加载完A和B的时候,也会出现打包到一个css文件那样的样式覆盖的问题

所以要解决你的问题,你需要的是样式隔离方案,而不是拆分css文件的方案

Answer 2

可以使用mini-css-extract-plugin，将css根据js拆分打包