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 （Ubuntu）使用vi和vim方向键变成了ABCD

    ubuntu下 vi输入方向键会变成ABCD,这是ubuntu预装的是vim tiny版本,安装vim full版本即可解决. 首先,卸载了原有的vim $ sudo apt-get remove v ...

  2. 使用ViewPager实现导航

    1.使用PageAdapter适配器 2.使用FragmentPageAdapter适配器 监听事件: OnPageChangeListener 百度云:链接: http://pan.baidu.co ...

  3. SQL语句 case ... when

    select 字段A, 字段B, CASE WHEN t.operate = 1 then 'aa'WHEN t.operate = 2 then 'bb'WHEN t.operate = 3 the ...

  4. WPF绑定命令

    一.目的 降低代码耦合度(降低UI层和BLL层的代码耦合度),将UI层的后台代码更好的转移到BLL层中,让视图和业务逻辑分离的更好 二.使用方式 1.创建一个RelayCommand,继承IComma ...

  5. 深入理解JavaScript执行上下文、函数堆栈、提升的概念

    本文内容主要转载自以下两位作者的文章,如有侵权请联系我删除: https://feclub.cn/post/content/ec_ecs_hosting http://blog.csdn.net/hi ...

  6. [SC] OpenSCManager 失败 5:拒绝访问

    问题:[SC] OpenSCManager 失败 5: 网查这个错误信息指拒绝访问  权限不足 1.解决: 以管理员身份运行cmd,即可 查询这个提示是指什么错误时,看网上有很多文章写用下面这种方法, ...

  7. HDU 6043 - KazaQ's Socks | 2017 Multi-University Training Contest 1

    /* HDU 6043 - KazaQ's Socks [ 找规律 ] | 2017 Multi-University Training Contest 1 题意: 一共 n 双袜子编号 1~n,每天 ...

  8. Codeforces 838E Convex Countour

    题 OvO http://codeforces.com/contest/838/problem/E (IndiaHacks 2nd Elimination 2017 (unofficial, unra ...

  9. windows安装解压版postgresql

    1.postgresql解压版下载 2.将下载的postgresql-12.1-1-windows-x64-binaries.zip解压 data文件夹后面初始化数据库时手动创建的 3.初始化数据库 ...

  10. 【Python网络】子网划分

    ip地址的结构和分类 根据 TCP/IP 协议,连接在internet上的每个设备都必须有一个ip地址 他是一个32位二进制数,也可以用点分十进制表示,每八位一组,用一个十进制表示即0-255,每组用 ...