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. 微软宣布加入机密计算联盟，与谷歌和BAT 等巨头联手保护数据安全

    联盟创始成员还包括阿里巴巴.Arm.百度.谷歌.IBM.英特尔.红帽.瑞士电信和腾讯等科技公司,它提供了一个让行业聚集起来的机会,以促进使用机密计算来更好地保护数据. 建立机密计算联盟的需求源于这样一 ...

  2. A主机ping B主机发生了什么？

    计算机网络面试题:A主机ping B主机发生了什么? 众所周知,ping命令使用的是ICMP协议包,那么A主机ping B主机到底发生了什么呢? 1 ping介绍 ping(Packet Intern ...

  3. windows 环境下基于Python 的GDAL 安装

    最近由于需要利用pytho处理地理空间数据,但是python本身并没有访问和处理地理空间数据的包,只能借助于GDAL(Geospatial Data Abstraction Library)来进行访问 ...

  4. 第六章 组件 63 组件传值-父组件向子组件传值和data与props的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. Nginx概念

    这篇文章只是单纯的介绍nginx以及一些相关概念,有的概念在实际应用中不会用到,不理解也没有关系,这不影响我们学习nginx. Nginx是什么 如果你知道http协议和httpd是什么,那你就会容易 ...

  6. luogu1261 服务器储存信息问题[最短路]

    首先$O(n^2\log n)$暴力很好想,直接每个点出发跑一遍最短路,排$dis$统计一下即可.考虑怎么优化.发现$rank$很小,考虑从$rank$入手.换一种统计方法,看每个点$x$如果作为别的 ...

  7. 用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

    前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: gi ...

  8. gitlab断电

    断电重启以后 会出现2019-06-26_05:47:42.71382 HINT: If you're sure there are no old server processes still run ...

  9. 【Eclipse】Macbook eclipse 指定JDK

    1. vi /Applications/eclipse/Eclipse.app/Contents/Eclipse/eclipse.ini 输入 -vm /Library/Java/JavaVirtua ...

  10. 慎用javascript自动类型转换

    1.如果把非空对象用在逻辑运算环境中,则对象被转换为true.此时的对象包括所有类型的对象,即使是值为false的包装对象也被转换为true. 2.如果把对象用在数值运算环境中,则对象会被自动转换为数 ...