vue-loader分析

分析一下Vue2.0中的vue-loader是如何處理.vue單文件組件的:

 

1.vueLoaderplugin 做用是 找到.vue,.vue.html的rules而後在他們的rule裏添加 pitcher

rule中的順序是這樣的: [ pitch-loader, … … , vue-loader] (pitcher在在開始，vue-loader在最後，這一切是經過把...clonedrule放到中間來實現的）

 

  * pitchloader的resourceQuery函數代表了，會對request中帶有vue字段的request使用pitchloader

 

 

2.vue-loader 

 

      step1: 對於request上不帶type類型的Vue SFC進行parse 生成一個js module

（ 將由source.vue提供 render函數/staticRenderFns，js script, style樣式,並交由normalizer進行統一的格式化，最終導出component.exports

 

      step2: 對新生成的js module 進行AST的解析以及相關依賴的收集過程，

      處理時，會處理step1中生成的帶vue字段的request，這些東東會交給pitcher loader來處理

      pitcherloader 會剔除eslint，剔除pitcher loader自身， 根據不一樣type進行處理， 生成返回新的帶vue字段的js module, 

 

　　step3: 由於已經剔除掉pitcher loader了，在處理這個新返回的帶vue字段的的js module的時候，就不會再走pitchloader了，會通過下面的過程：

     

    styleblock：

   1.vue-loader（在最開始的時候把vue-loader放到rule最後了，因此執行的時候，它是第一個（pitch到最後而後從右向左執行，

   ( ⬆️ 抽離style block

   2. stylePostLoader(處理 做用域 scoped css

   3. css-loader(處理相關資源引入路徑

   4. vue-style-loader(動態建立style標籤插入css

   

     templateblock：

    1.vue-loader(抽離template block

    2.pug-plain-loader(將pug模塊轉化爲html字符串

    3.templateLoader(編譯 html模版字符串，生成render/staticRenderfns函數並暴露出去

 

 

  *selectBlock方法 ：

   selectBlock方法內部主要就是根據不一樣的type類型(template/script/style/custom

來獲取descriptor上對應類型的content內容並傳入到下一個loader處理