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:

对这一大坨js代码进行parse，依赖收集的过程中处理Step1中的那些request，这些request的query中带着vue字段，

于是进行pitch-loader的处理，处理中会剔除掉pitcher，返回新的request

Step3:

vue-loader处理新的request，query中带着type字段了，于是会selectBlock，获取vue文件中对应的block内的content，并用下一个loader去处理

对于templateblock最终用templateloader生成reder/staticRenderFns函数并暴露出去

对于sytleblock会用stylePostLoader处理scopedcss，使用css-loader处理资源引入路径，使用style-loader将css插入dom

webpack对vue单文件组件的解析的更多相关文章

  1. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  2. webpack构建vue单文件组件

    1.安装vue-loader和vue-template-compiler npm i vue-loader vue-template-compiler --save-dev 2.配置webpack.c ...

  3. webpack入坑之旅（五）加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  4. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

  5. vue 单文件组件

    在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...

  6. ts-loader如何与vue单文件组件衔接

    .ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...

  7. 基于VSCode的vue单文件组件模板设置---一次设置，可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  8. vue 单文件组件最佳实践

    vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...

  9. 一丢丢学习之webpack4 + Vue单文件组件的应用

    之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...

随机推荐

  1. python常用模块：项目目录规范、定制程序入口、自定义模块、引用变量、time和datetime模块

    今天讲课内容有两大部分: 一.文件目录规范二.定制程序入口三.使用标准目录后四.常规函数time.datetime 一.标准目录规范 之前用过的案例atm机+购物商城代码过长,在学习了模块和包以后,我 ...

  2. 【icpc2019网络赛南昌站】Yukino With Subinterval

    傻b错误调一天系列 原题: 大意:给你一个数列a,字词两种操作: 1.把c[l]改成r 2.询问在区间[l,r]中,有多少个极大子区间满足子区间里的数全部一样,且在[x,y]范围内 (对于满足条件的区 ...

  3. C - Nuske vs Phantom Thnook

    题意:n*m矩阵,n,m<=2e3,矩阵中的1能走到相邻4个1上,0代表障碍,若两个1联通 则只有一条路径 q个询问,q<=2e5,每次询问一个子矩阵中有多少个连通分量? 同一个连通分量中 ...

  4. spring cache会默认使用redis作为缓存吗？

    web项目中,只需要配置 redis 的IP,端口,用户名和密码就可以使用redis作为缓存了,不需要在在java 代码中配置redisConfig,redisConfig只是作为缓存配置的辅助,比如 ...

  5. TCP_Wrappers访问控制

    一.TCP_Wrappers简介 对有状态连接的特定服务进行安全检测并实现访问控制,它以库文件形式实现,某进程是否接受libwrap的控制取决于发起此进程的程序在编译时是否针对libwrap进行编译的 ...

  6. programble blending --frame buffer fetch

    https://developer.arm.com/-/media/Files/pdf/graphics-and-multimedia/Efficient%20Rendering%20with%20T ...

  7. puppet完全攻略（二）让puppet代码支持vim高亮显示

    puppet完全攻略(二)让puppet代码支持vim高亮显示 2012-06-10 13:33:01 标签:puppet viong puppet完全攻略 原创作品,允许转载,转载时请务必以超链接形 ...

  8. hive中的 lateral view

    lateral view用于和split, explode等UDTF一起使用,它能够将一列数据拆成多行数据,在此基础上可以对拆分后的数据进行聚合. 一个简单的例子,假设我们有一张表pageAds,它有 ...

  9. 个人签发https证书

    环境: jdk1.8 window7 cmder 1.生成证书库jks keytool.exe -genkeypair -alias www.bingco.com -keyalg RSA ^ -key ...

  10. VLC播放器：快捷键

     造冰箱的大熊猫@cnblogs 2019/2/27 VLC播放器(VLC Media Player)快捷键汇总(在Ubuntu 16.04环境下测试) - 音量大/小:CTRL+上/下 - 静音开/ ...