zoukankan      html  css  js  c++  java
  • vue-loader分析

    分析一下Vue2.0中的vue-loader是如何处理.vue单文件组件的:

     

    1.vueLoaderplugin 作用是 对本次webpack编译的所有rules做操作,添加pitch-loader和vue-loader,进行一个顺序的重新排放,

    最终rule中的顺序是这样的: [ pitch-loader, … … , vue-loader] (pitcher在在开始,vue-loader在最后,这一切是通过把...clonedrule放到中间来实现的)

     

    (  * pitchloader的resourceQuery函数表明了,这个loader只会对request中带有vue字段query的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处理

     )

     

     

     

    在这个过程中,可以注意到,在处理一个sfc文件时,vue-loader自身被多次调用。

  • 相关阅读:
    js 兼容阻止事件冒泡stopPropagation
    php session cookie
    js 给父元素的每个子元素绑定事件
    php 调用系统命令 超时
    php textarea换行
    php 中文字符串截取子串
    Predefined Asp.net skins(Themes) 你下载了吗?
    自定义DataFilter实现Atlas客户端DataView的数据筛选
    用Altas Behaviors实现就地编辑(1) [译]
    组件开发之Asp.net服务器控件Collection[集合]属性的设计时支持--编辑、保存
  • 原文地址:https://www.cnblogs.com/eret9616/p/11409512.html
Copyright © 2011-2022 走看看