vue-style-loader源码初步分析

背景：

　　首先声明一下，我只是个菜鸡，为了解决问题才去看的源码，解决完问题以后也就没有兴趣看其余部分代码了，因此这篇文章是一次很低层次的解读，角度也至关片面，想必会有不少喷点吧。

　　事情的通过是这样，今年十月底的时候对公司前端产品的构建工具作了一次升级，从webpack1升级到了webpack4，如今已经投入正式环境，写这篇文章的时候我在外边出差，忙的时候997，闲的时候也997，这会儿就有点闲得慌，因此就想着把以前的操做复盘总结一遍，这个过程其实很是顺利，没遇到过几回报错，打开build出来的文件以后却让我莫名的诧异，个人样式并无挂载到dom元素中，但构建过程当中并无遇到过报错。我这边使用的前端框架是vue，因为解析vue文件样式代码的过程当中须要用到的loader有vue-loader css-loader（或者其余css预处理语言的loader）、vue-style-loader，因而我就把问题定位到了这几个loader上面。由于以前有成功过的案例，在确认过个人配置跟以前写的配置同样以后，我对使用的这些依赖产生了怀疑，可是我实在是很好奇究竟是哪一个流程中除了问题，因此就对构建流程中这部分的细节进行了一些了解。

　　我起了一个新的入口文件和父组件，去除无关的代码来复现这个问题。

　　很少说，直接多图警告

事 故 现 场

　　执行完打包命令以后，按理来讲打开dist目录中的index.html页面中应该就会出现一个傻不愣登的正方形色块好比：

　　但你我都知道若是这么顺利的话就不会有这篇水文存在了，实际上打开是这样的：

　　我以前大概了解过vue-style-loader是在style-loader的基础之上写出来的，主要功能跟style-loader相似，只是多了一些额外的特性，因此我想切换成style-loader试一下,而后愕然发现竟然正常了，因而推测问题出在vue-style-loader身上，就在去看依赖的源码并作了一些尝试：

 

 

 

 

 

 

　　但问题来了：

　　我不可能真的去改node_modules中的vue-style-loader，由于每换一个环境，就须要改一次源码这确定是不现实的，正确的解决办法必定不在这里。

我开始思考vue-style-loader与style-loader的区别，为何style-loader就能顺利处理esModule呢，而后我在style-loader的代码中找到了线索，源码中有个名为options的json文件，描述了这个loader的配置项及其含义，其中有一个esModule属性：

 

　　因而我去github上看了style-loader的发布历史，最近的一个版本：

 

　　从options中的附带连接也了解到了如今的css-loader也有个配置属性esModule，从css-loader@3.4.0(2019-12-17)开始，css-loader支持esModule属性，@4.0.0(2020-07-26)开始这个属性的默认值为true。

终于破案了，其实是由于我复盘的时候，安装的style-loader、vue-style-loader、css-loader没有指定版本，默认安装了最新的依赖，css-loader、style-loader都把配置项的esModule默认值设为了true，而vue-style-loader最后一次更新已是快三年前了，这期间的改动没有同步，因此vue-style-loader是不处理esModule的，因此这个问题的解决方法就出来了，只须要把css-loader的options添加上esModule:false就可以解决问题。