vue-loader源码解读

源码 · 2024-9-2 03:48:44

调试
新增script调试脚本

npm run debug后打开chrome://inspect/,即可看到对应位置断点

初始化
webpack的插件要求是一个包罗了apply方法的对象，将被其自动回调

为loader打标志
当编译对象创建后，读取loader并标志vue-loader为true，表现用户通过plugin方式注入webpack而不是直接作为loader利用

格式化
借用webpack的工具类，对用户界说的rules做校验并格式化处置惩罚
处置惩罚后的情势同一为

校验
校验是否在rules中设置了vue-loader以及设置的正当性

扩展loader
末了将vue-loader扩展成多个子loader，比如专门处置惩罚template模版的
终极给到webpack的loader数要远远凌驾用户界说的5个

loader的调用
当匹配到.vue文件后，将实验dist/index文件，即入口
别的，loader的调用肯定是伴随着require发生的，就像欣赏器中的script标签会相对应的发起一次ajax哀求一样，这是一次重复的动作，那也就意味着在apply中对编译对象的监听会不停被调用

.vue文件的处置惩罚
当webpack初次加载到app.vue时，读取到的源代码如下

调用vue提供的模板编译本领，对字符串做分析
这将提取出三个焦点属性：script、style和template

针对这三个属性，将被包装成三个import
效果如下

此时只必要再分别界说三个详细的loader来拦截处置惩罚即可

所属分类: 问答交流