webpack对vue单文件组件的解析

vue2.0

Step0:

首先vuelLoaderPlugin会在webpack初始化的时候 注入pitcher这个rule,然后将rules进行排序,

[pitcher,...clonedRule, vueRule], pitcher对应的pitch-loader会对query字段中有vue字段的进行处理

Step1:

vue-loader处理.vue结尾的文件,当query中没有type字段的时候,会生成一大坨js代码

其中包含template/script/style各个部分不同的request

Step2:

webpack内置的acron对这一大坨js代码进行parse,依赖收集的过程中处理Step1中生成的request,这些request的query中带着vue字段,

于是最终会被step1中加入的pitch-loader的处理,处理中会剔除掉pitcher自身,并返回新的request

Step3:

vue-loader处理新的request,经过pitch-loader处理后的request中已经带着type字段了,于是会selectBlock,获取vue文件中对应的block内的content,并用下一个loader去处理

对于templateblock最终用templateloader生成reder/staticRenderFns函数并暴露出去

对于sytleblock会用stylePostLoader处理scopedcss,使用css-loader处理资源引入路径,使用style-loader将css插入dom

原文地址:https://www.cnblogs.com/eret9616/p/11817318.html