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:
对这一大坨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单文件组件的解析的更多相关文章
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- webpack构建vue单文件组件
1.安装vue-loader和vue-template-compiler npm i vue-loader vue-template-compiler --save-dev 2.配置webpack.c ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...
- vue 单文件组件
在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...
- ts-loader如何与vue单文件组件衔接
.ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...
- 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生
第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...
- vue 单文件组件最佳实践
vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...
- 一丢丢学习之webpack4 + Vue单文件组件的应用
之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...
随机推荐
- python函数:函数参数、对象、嵌套、闭包与名称空间、作用域
今天的内容整理共有5部分 一.命名关键字参数 二.函数对象 三.函数的嵌套 四.名称空间与作用域 五.闭包函数 一.命名关键字参数 # 命名关键字参数: 在定义函数时,*与**之间参数称之为命名关键字 ...
- sql 脚本过大
先把sql脚本文件中的创建部分 剪切 出来执行,创建一个数据库 然后执行cmd命令 sqlcmd -S CAOHONGWEI -U sa -P p@ss!123 -d ...
- springboot2.1.7整合Druid
一.maven的依赖:文中就贴重点的, 其他依赖就不贴了 <dependency> <groupId>com.alibaba</groupId> <artif ...
- qspi nor
qspi: sf probe SF: Detected s25fl256s_256k with page size 512 Bytes, erase size 256 KiB, total 32 Mi ...
- NoSQL数据库技术实战-第1章 NoSQL与大数据简介 NoSQL数据库的类型
键值存储数据库临时性:如Memcached.临时性的键值数据库把数据存储在内存中,在两种情况下会造成上数据的丢失,一是断电,而是数据内容超出内存大小.这种处理的好处是非常快.永久型:如Tokyo Ty ...
- java学习笔记(二)分布式框架Dubbo+zookeeper搭建
参考文章http://www.cnblogs.com/sxjun/p/6963844.html 注意的几个问题: 1.配置dubbo.properties 将以下地址改为你Zookeeper注册的地址 ...
- MySQL_DBA整理
MySQL_DBA整理(转) 2011-01-26 16:51:41 分类: Mysql/postgreSQL 转自:丁丁:http://www.itpub.net/thread-831154-2- ...
- BZOJ 3060: [Poi2012]Tour de Byteotia 并查集
前 $k$ 个节点形成的结构必定是森林,而 $[k+1,r]$ 之间肯定是都连上,而剩下的一个在 $[1,k],$一个在 $[k+1,r]$ 的节点就能连多少连多少即可. Code: #include ...
- java中MD5函数
import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public class MD5U ...
- BeautifulSoup4 提取数据爬虫用法详解
Beautiful Soup 是一个HTML/XML 的解析器,主要用于解析和提取 HTML/XML 数据. 它基于 HTML DOM 的,会载入整个文档,解析整个 DOM树,因此时间和内存开销都会大 ...