问题描述

最近遇到一个问题，在开发模式下，样式加载是好的，但是当部署到线上的时候，css样式一个也加载不上，所有的样式都是空的。

问题分析

1
刚开始因为是webpack的配置有问题，可是style-loader的配置就那么点，也没有什么需要特别注意的配置，可是这个配置是从另外一个正常的配置那边拿过来的，只能测试，发现和webpack的配置没有关系。
2
既然排除了webpack的配置原因，然后又想是不是和src的源码有关系，于是就写了一个测试用例，发现和源码也没有关系。
3
两者都排除了，最后想是不是和npm包的版本有关系，然后去把npm包更新，发现把另外一个正常的npm包copy过来是正常的，于是就觉得是npm包的关系，所以就认为找到了原因，但是npm包太多了，也没往下继续寻找，先上线之后再说，

问题解决

因为发现和npm包有关系，所以把另外一个拿过来了。

问题复现

没想到没过多久，又出现了这种情况，所有的css样式在线上又全都不能挂载到dom元素上了，真是他妈的日了狗了。
因为上次发现是因为npm包的关系，这次直接替换发现还是不行，只能另外想别的办法。
于是建了一个测试工程，思路还是和以前一样，一点点排查，最后发现是因为在package.jsonl里边的sideEffects： false 引起的。
于是去查了下，sideEffects和webpack的tree shakeing 有关系，可能在打包的时候，把相关的代码给shake掉了，所以导致样式挂载不上去。