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 单文件组件)内部的每个语言块，最后将这些块组成最终的模块。这是整个过程的简要概述
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导入的，每个块都有不同的请求查询
我们想要
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'
在扩展请求的过程中，主
vue-loader将再次被调用。但是这次，加载器注意到这些请求有查询并且只针对于特定块。所以选择（src/select.ts）目标块的内容将传递与加载器匹配的内容对于这些
<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'
▼
原创系列推荐
▼
5. Webpack4 入门（上）|| Webpack4 入门（下）
6. MobX 入门（上） || MobX 入门（下）
7. 59篇原创系列汇总
回复“加群”与大佬们一起交流学习~
点这，与大家一起分享本文吧~