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