理解vue-loader - 技术栈

事情的起源是被人问到，一个以.vue结尾的文件，是如何被编译然后运行在浏览器中的？突然发现，对这一块模糊的很，而且看mpvue的文档，甚至小程序之类的都是实现了自己的loader，所以十分必要抽时间去仔细读一读源码，顺便总结一番。

首先说结论：

复制代码

一、vue-loader是什么



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


至于什么是webpack的loader，其实就是用来打包、转译js或者css文件，简单的说就是把你写的代码转换成浏览器能识别的，还有一些打包、压缩的功能等。

这是一个.vue单文件的demo

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 loader，例如在

三、vue-loader的实现

复制代码

先找到了vue-laoder在node_modules中的目录，由于源码中有很多对代码压缩、热重载之类的代码，我们定一个方向，看看一个.vue文件在运行时，是被vue-loader怎样处理的



既然vue-loader的核心首先是将以为.vue为结尾的组件进行分析、提取和转换，那么首先我们要找到以下几个loader

selector--将.vue文件解析拆分成一个parts对象，其中分别包含style、script、template

style-compiler--解析style部分

template-compiler 解析template部分

babel-loader-- 解析script部分，并转换为浏览器能识别的普通js

首先在loader.js这个总入口中，我们不关心其他的，先关心这几个加载的loader，从名字判断这事解析css、template的关键

复制代码

3.1 首先是selector

var path = require('path')
var parse = require('./parser')
var loaderUtils = require('loader-utils')
 
 
module.exports = function (content) {
  this.cacheable()
  var query = loaderUtils.getOptions(this) || {}
  var filename = path.basename(this.resourcePath)
  // 将.vue文件解析为对象parts,parts包含style, script, template
  var parts = parse(content, filename, this.sourceMap)
  var part = parts[query.type]
  if (Array.isArray(part)) {
    part = part[query.index]
  }
  this.callback(null, part.content, part.map)
}

selector的最主要的功能就是拆分parts，这个parts是一个对象，用来盛放将.vue文件解析出的style、script、template等模块，他调用了方法parse。

复制代码

parse.js部分
[理解vue-loader](https://www.cnblogs.com/Sherlock09/p/11023593.html)