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处理