zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    php接口安全设计浅谈
    tcp长连接、短连接、连接池的思考
    PHP单例模式及应用场
    springcloud ribbon
    springcloud eureka
    springcloud gateway
    zipkin下载地址
    用Zookeeper作为Spring cloud的配置中心
    mybaties四大对象
    java equals总结
  • 原文地址:https://www.cnblogs.com/eret9616/p/11817318.html
Copyright © 2011-2022 走看看