事情的起源是被人问到，一个以.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)