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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM