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