FE

Vue 学习笔记（四十）：了解 Vue Loader

是什么

Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <div class="example">{{ msg }}</div>
</template>

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

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

简单的说，他就是基于webpack的一个的loader，解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理，核心的作用，就是提取，划重点。

如果不习惯一个文件里同时包含有html、css和JavaScript，那么我们可以使用语言块的src属性来把扩展文件引入到组件中，如：

1
2
3
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

作用

  • 允许为 Vue 组件的每个部分使用其它的 webpack loader，例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug；
  • 允许在一个 .vue 文件中使用自定义块，并对其运用自定义的 loader 链；
  • 使用 webpack loader 将 <style> 和 <template> 中引用的资源当作模块依赖来处理；
  • 为每个组件模拟出 scoped CSS；
  • 在开发过程中使用热重载来保持状态。

实现

暂时就不做过多深入了解了，可以在 node_modules 中找到 vue-laoder 源码。

vue-loader 的核心首先是将以为 .vue 为结尾的组件进行分析、提取和转换。总入口在loader.js。核心 loader

  • selector 将.vue文件解析拆分成一个parts对象，其中分别包含style、script、template
  • style-compiler 解析style部分
  • template-compiler 解析template部分
  • babel-loader 解析script部分，并转换为浏览器能识别的普通 js

附录：官网教程 https://vue-loader.vuejs.org/zh/