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. linux基础—课堂随笔_03 SHELL脚本编程基础

    shell脚本编程基础 条件选择:if语句 选择执行: 注意:if语句可嵌套 单分支 if(开头)判断条件:then条件为真的分支代码 fi(结尾) 双分支 if(开头)判断条件:then条件为真的分 ...

  2. java中创建List<>类型的数组-20171028

    遇到了一个问题需要创建List类型的数组,但是在网上查了很多资料,好像发现并不能创建泛型的数组,于是改用Hashmap实现同等的功能. 代码如下: Map<String,List<AddL ...

  3. ESP8266乐鑫版本的（支持云端升级 （Boot 模式）烧写方法，(V1.5.4官方介绍如下)（BOOT模式）

    硬件平台: nodeMCU devkit核心板,带ch340g,应该是仿造的,官方是cp2102驱动,安信可科技有连接https://wiki.ai-thinker.com/esp8266/board ...

  4. MySQL用户

    创建用户 在对 MySQL 的日常管理和实际操作中,为了避免用户恶意冒名使用 root 账号控制数据库,通常需要创建一系列具备适当权限的账号,应该尽可能地不用或少用 root 账号登录系统,以此来确保 ...

  5. hdu 6049 Sdjpx Is Happy

    题: OwO http://acm.hdu.edu.cn/showproblem.php?pid=6049 (2017 Multi-University Training Contest - Team ...

  6. 快速拿下CSS盒子模型

    下面的图片就是Chrome浏览器审查元素里的盒子情况展示,我们可以看到一个容器由4个颜色代表的内容组成:内容(content).填充(padding).边框(border).边界(margin),在这 ...

  7. web文件系统

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

  8. Count the Buildings （ s1 ）

    http://acm.hdu.edu.cn/showproblem.php?pid=4372 题意:n个房子在一条线上(n<=2000),高度分别为1~n,现在需要将房子这样放置:从最左往右能看 ...

  9. BZOJ 4221 [JOI2012春季合宿]Kangaroo (DP)

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=4221 题解 orz WYC 爆切神仙DP 首先将所有袋鼠按大小排序.考虑从前往后DP, ...

  10. Spring Boot教程（四十一）LDAP来管理用户信息（1）

    LDAP简介 LDAP(轻量级目录访问协议,Lightweight Directory Access Protocol)是实现提供被称为目录服务的信息服务.目录服务是一种特殊的数据库系统,其专门针对读 ...