vue-loader 作用

亲测可用，若有疑问请私信

Vue Loader

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

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

.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 、

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

vue-loader 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 lang 属性。例如，你可以像下面这样使用 Sass 语法编写样式：

<style lang="sass">
  /* write Sass! */
</style>

语言块

• 默认语言：html。

• 每个 .vue 文件最多包含一个 块。

• 内容将被提取为字符串，将编译并用作 Vue 组件的 template 选项。

• 默认语言：js (在检测到 babel-loader 或 buble-loader 配置时自动支持ES2015)。

• 每个 .vue 文件最多包含一个 块。

• 该脚本在类 CommonJS 环境中执行 (就像通过 webpack 打包的正常 js 模块)，这意味着你可以 require() 其它依赖。在 ES2015 支持下，你也可以使用 import 和 export 语法。

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

• 默认语言：css。

• 一个 .vue 文件可以包含多个 标签。

• 标签可以有 scoped 或者 module 属性 (查看 CSS 作用域和 CSS Modules) 以帮助你将样式封装到当前组件。具有不同封装模式的多个 标签可以在同一个组件中混合使用。

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

学习于 https://vue-loader-v14.vuejs.org/zh-cn/start/spec.html