【Vuejs】509- vue-loader工做原理

github.com/vuejs/vue-loader#how-it-works

什么vue-loader

vue-loader是用于webpack的加载器，容许你用叫作Single-File Components单文件组件的格式来写Vue组件

<template>
  <div class="example">{{ msg }}</div>
</template>


<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>


<style>
.example {
  color: red;
}
</style>

这里有vue-loader提供许多炫酷的功能

• 容许Vue组件的每一个部分使用其它的webpack加载器，好比Sass加载<style>和Pug加载<template>

• 容许.vue文件中的自定义块，这些(自定义块)可以运用于定制的加载程序链

• 将静态的<style>和<template>的assets引用视为模块依赖，而且用webpack加载程序去处理他们

• 模拟每一个组件的CSS做用域

• 在开发的过程当中使用热加载保持状态

简而言之，vue-loader和webpack的组合可以使你在写Vue.js应用时，提供现代化、灵活的和功能很是强大的前端工做流

vue-loader是怎么工做

vue-loader不是简单的源转换器。它用本身专用的加载链（你能够认为每一个块是虚拟的模块）处理SFC(Single-file Component 单文件组件)内部的每一个语言块，最后将这些块组成最终的模块。这是整个过程的简要概述

1. vue-loader使用@vue/component-compiler-utils将SFC源码解析成SFC描述符,而后为每一个语言块生成一个导入，实际返回的模块代码看起来像这样

// 从主加载程序返回的代码source.vue的代码


// import the <template> block
import render from 'source.vue?vue&type=template'


// import the <script> block
import script from 'source.vue?vue&type=script'
export * from 'source.vue?vue&type=script'


// import <style> blocks
import 'source.vue?vue&type=style&index=1'


script.render = render
export default script

注意这些代码是从source.vue导入的，每一个块都有不一样的请求查询

1. 咱们想要script的内容被视为.js文件（若是是<script lang="ts"，咱们想要被视为.ts文件）。其余的语言块也是一样的。因此咱们想要webpack 申请任何已配置模块的规则去匹配.js，也看起来像source.vue?vue&type=script的请求。这就是VueLoaderPlugin(src/plugin.ts)做用：对于webpack的每一个模块规则，它建立一个相对于Vue语言块请求的修改后的克隆

假设咱们为全部的*.js配置过babel-loader.这些规则也同样会复制和应用于到Vue SFC的<script>块中，内部到webpack，一个像这样的请求

import script from 'source.vue?vue&type=script'

将扩展为

import script from 'babel-loader!vue-loader!source.vue?vue&type=script'

注意是vue-loader 也会匹配，由于vue-loader是应用于.vue的文件。一样地，若是你为*.scss文件配置了style-loader+css-loader+sass-loader

<style scoped lang="scss">

将经过vue-loader返回

import 'source.vue?vue&type=style&index=1&scoped&lang=scss'

webpack将会扩展成

import 'style-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'

1. 在扩展请求的过程当中，主vue-loader将再次被调用。可是此次，加载器注意到这些请求有查询而且只针对于特定块。因此选择（src/select.ts）目标块的内容将传递与加载器匹配的内容

2. 对于这些<script>块，这就差很少了。可是对于<template>和<style>，一些额外的任务须要被执行：

• 咱们须要使用Vue模板编译器编译模板

• 咱们须要在css-loader以后可是在style-loader以前，为<style scoped>块进行CSS处理。

从技术上来看，这里有额外的加载器（src/templateLoader.ts 和 src/stylePostLoader.ts）须要注入到扩展的加载程序链。若是终端用户不去配置（项目），这将会很复杂，因此VueLoaderPlugin也能够注入到一个全局Pitching Loader(src/pitcher.ts)而且监听Vue<template>和<style>请求,注入必要的加载器中。最终的请求像下面这样：

// <template lang="pug">
import 'vue-loader/template-loader!pug-loader!source.vue?vue&type=template'


// <style scoped lang="scss">
import 'style-loader!vue-loader/style-post-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'

▼

原创系列推荐

▼

1. JavaScript 重温系列（22篇全）

2. ECMAScript 重温系列（10篇全）

3. JavaScript设计模式 重温系列（9篇全）

4. 正则 / 框架 / 算法等 重温系列（16篇全）

5. Webpack4 入门（上）|| Webpack4 入门（下）

6. MobX 入门（上） ||  MobX 入门（下）

7. 59篇原创系列汇总

回复“加群”与大佬们一块儿交流学习~

点这，与你们一块儿分享本文吧~