Webpack自定义vue文件Loader，Loader执行多次的问题排查与分析！

今天为大家带来一篇前端技术文章，其实也是想给那些不仅希望解决问题，也想知道问题出现的原因的”钻牛角尖“程序猿刨析一下，抹掉你脑袋的种种“疑问”！

遇到这个问题的概率可能很小，当然了能够出现这个疑问，证明你已经开始对你的技术进行提升，并希望通过更便捷的方式来提升效率。

是怎么遇到这个问题的呢？

前提：

1、基于vue-cli脚手架创建的Vue工程

2、只有一个.vue文件包含/deep/透传语法

整体来讲一下，是因为node-sass这个css编译器目前官方已经宣布停止更新了，并建议切换到dart-sass编译器，所以整个前端工程需要升级一下这个编译器，切换到dart-sass上面。

整体来说，升级切换到dart-sass并不难，因为我们只需要执行一下下面的命令：

npm uninstall node-sass;

npm install sass -D;

然后很开心的就执行了：npm run serve;

结果编译失败，并没有成功运行：

一般解决办法：

很明显，在.vue文件当中，我们在进行样式透传的时候，采用了/deep/语法，而dart-sass并不支持，但是dart-sass是支持::v-deep语法的。

那么我们第一时间能够想到的就是全部手动打开文件将所有/deep/替换成::v-deep，来进行解决。

不过这种办法可以说非常缓慢，要知道我们的项目可能已经累积到成千上百个文件，每一个打开都需要进行替换，是非常耗费时间和精力的。

当然了有些同学或许会采用工具进行文件目录下对文件整体替换，这也是一种解决办法。

但是他们最终都会导致之前的所有代码都需要更改变动，那么有没有什么办法在不改动原有代码的情况下，实现语法的替换呢？甚至说，我们依然可以采用原有的/deep/语法来写，但是最终编译的时候自动转换为::v-deep？

Webpack自定义Loader预处理器解决办法

.vue文件之所以能够被webpack处理，是因为他有vue-loader预处理器，可以将.vue文件进行编译，转换成js，而且每一个预处理是可以进行级联调用的，前一个loader输出的内容可以作为下一个loader的内容传入进去。

所以我们可以采用自定义loader的方法，来实现上面的进行自动替换，于是我就写了一个非常简单的预处理器Loader，通过正则表达式来匹配文件内容，如果包含/deep/我们就对内容进行替换，然后返回替换后的内容。

第一步：新建一个preSassLoader.js处理器

constloaderUtils=require('loader-utils');
module.exports=function(content,map,meta){
if(/\/deep\//g.test(content)){
console.log('找到含有/deep/的文件');
content=content.replace(/\/deep\//,'::v-deep');
}
returncontent;
};

第二步：在vue.config.js文件中，我们增加对.vue文件的自定义loader处理器

chainWebpack:config=>{
config.module
.rule('vue').use('preSassLoader')
.loader('./src/loaders/preSassLoader');
}

第三步：启动工程项目

执行：npm run serve;

结果是编译成功，一般来说，到这儿其实就算是解决了上面自动替换的需求，但是我们有没有发现图中标出的4个红框中的内容，这个自定义preSassLoader其实对于同一个.vue文件来说执行了4次，（本项目为测试项目，只有一个.vue文件当中有/deep/语法）

对于讲究效率的我来说，这是难以接受的，一个文件只需要替换一次就够了，不用执行这么多遍，所以我就开始分析为什么走了4遍？

我开始在网上搜索，这个内容可以说少之又少，不过也有人提出了这样的疑问，不过并没有人来为他解答，不知道那个提问的人现在心中的疑问消除了没？

不过我仔细一想也基本就能理解了，很少有人会这样自定义一个loader来进行处理吧，大部分人都采用第一种解决办法就完事了。

既然网上找不到，那就只能自己进行分析了，开启Debug

通过vscode配置npm 调试模式：

通过观察分析，我们发现在我们自定义loader处理器里面有个resourceQuery字段是不一样的

那么我们增加一个输出，将resourceQuery进行打印

从上图红框中，我们就不难发现，4次的resourceQuery已经解释了，其实一个.vue单文件当中，有3大块，template模板，script，和style，构成了一个页面所需的元素，而vue-loader就是对这个.vue单文件进行编译转换，而多出来的那个处理应该是cache-loader，也就是说对于一个.vue文件来说，会生成四种请求链接：

1、test.vue

2、test.vue?vue&type=template&id=fac91d24&scoped=true&

3、test.vue?vue&type=script&lang=js&

4、test.vue?vue&type=style&index=0&id=fac91d24&scoped=true&lang=scss&

所以我们可以通过resourceQuery来进行过滤处理，此处我们用/type=style/来进行过滤

加上过滤条件后，这个真的就执行一次了。

你以为到这儿就完事了？还差得远呢！！！

虽然我们的处理逻辑执行了一遍，但是你有没有发现，其实进入到这个preSassLoader的.vue请求是一个也没有减少，我们其实只需要一个.vue文件只进入一次就可以了，而不是这一个文件的4次不同请求都被这个预处理器接收到。

这是因为我们在配置自定义preSassLoader的时候，捕获的是.vue文件而没有匹配resourceQuery后面的请求串，导致只要是.vue?xxx的请求这个预处理器都能接收到。

所以我们自己新建一个rule规则来进行精确匹配：

在vue.config.js中注释掉之前的匹配：

chainWebpack:config=>{
//注释掉
//config.module
//.rule('vue')
//.use('preSassLoader')
//.loader('./src/loaders/preSassLoader');
config.module
.rule('preDeep')
.test(/\.vue$/)
.use('preSassLoader')
.loader('./src/loaders/preSassLoader');
}

就暂时到这儿吧，希望可以解答遇到这个问题时候的你的疑问！