【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篇原创系列汇总

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

点这，与大家一起分享本文吧~