浅析vue-loader的作用及其提供的功能

1、vue 文件

　　vue文件是一个自定义的文件类型，用类HTML语法描述一个vue组件，每个.vue组件包含三种类型的顶级语言块 <template>、<script>、<style>，还允许添加自定义的模块

2、vue-loader 作用

　　解析和转换.vue文件，提取出其中的逻辑代码 script、样式代码style，以及 HTML 模板 template，再分别把他们交给对应的loader去处理

　　vue-loader 会解析文件，提取出每个语言块，如果有必要会通过其他 loader 处理，最后将他们组装成一个 commonjs 模块；module.exports 出一个 vue.js 组件对象

（1）<temlate>语言块：默认语言html，每个.vue 文件最多包含一个< template>块，内容将被提取为字符串，将编译用作 VUE 组件的 template 选项

（2）<script>语言块：

　　默认语言JS（在监测到 babel-loader 或者 buble-loader 配置时，自动支持 ES6）

　　每个.vue 文件最多包含一个< script>块

　　该脚本在类 CommonJS 环境中执行（就像通过 webpack 打包的正常 JS 模块）所以你可以 require()其他依赖。在 ES6 支持下，也可使用 import 跟 export 语法

　　脚本必须导出 Vue.js 组件对象，也可以导出由 VUE.extend()创建的扩展对象；但是普通对象是更好的选择

（3）<style>语言块：默认语言css；一个 .vue 文件可以包含多个< style>标签；

　　这个标签可以有 scoped 或 module 属性来帮助你将样式封装到当前组件；具有不同封装模式的多个<style>标签可以在同一个组件中混合使用；

　　默认情况下，可以使用 style-loader 提取内容，并且通过< style>标签动态加入文档的< head>中，也可以配置 webpack 将所有的 styles 提取到单个 CSS 文件中

（4）自定义块

　　可以在 .vue 文件中添加额外的自定义块来实现项目的特殊需求，例如< docs>块；

　　vue-loader 将会使用标签名来查找对应的 webpack loaders 来应用到对应的模块上；

　　webpack需要在 vue-loader 的选项 loaders 中指定 vue-loader 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模板语言，通过设置语言块的 lang 属性：

<style lang='sass'>
    /*sass*/
</style>

3、用途：

　　js可以写es6，style样式可以写scss或less，template 模板等

4、搭配loader介绍

　　css-loader：加载由vue-loader提取出的CSS代码

　　vue-template-compiler：把vue-loader提取出的HTML模板编译成可执行的 JS 代码

5、官方文档：https://vue-loader.vuejs.org/zh/

（1）处理资源路径：当 Vue Loader 编译单文件组件中的 <template> 块时，它也会将所有遇到的资源 URL 转换为 webpack 模块请求

（2）使用预处理器：在 webpack 中，所有的预处理器需要匹配对应的 loader。Vue Loader 允许你使用其它 webpack loader 处理 Vue 组件的某一部分。它会根据 lang 特性以及你 webpack 配置中的规则自动推断出要使用的 loader

（3）scoped css

（4）css modules

（5）热重载

（6）提供函数式组件的支持

（7）自定义块

（8）css 提取

（9）代码校验：eslint 和 stylelint