来聊聊 Vue Loader

Vue Loader

vue-loader.vuejs.org/zh/

Vue Loader 是什么？

Vue Loader 是一个 webpack 的 loader，它容许你以一种名为单文件组件 SFC的格式撰写 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，例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug；
• 容许在一个 .vue 文件中使用自定义块，并对其运用自定义的 loader 链；
• 使用 webpack loader 将 <style> 和 <template> 中引用的资源看成模块依赖来处理；
• 为每一个组件模拟出 scoped CSS；
• 在开发过程当中使用热重载来保持状态。

简而言之，webpack 和 Vue Loader 的结合为你提供了一个现代、灵活且极其强大的前端工做流，来帮助撰写 Vue.js 应用。

若是你不想手动设置 webpack，咱们推荐使用 Vue CLI 直接建立一个项目的脚手架。经过 Vue CLI 建立的项目会针对多数常见的开发需求进行预先配置，作到开箱即用。

处理资源路径

当 Vue Loader 编译单文件组件中的 <template> 块时，它也会将全部遇到的资源 URL 转换为 webpack 模块请求。

<img src="../image.png">
复制代码

github.com/webpack-con…

转换规则

资源 URL 转换会遵循以下规则：

• 若是路径是绝对路径 (例如 /images/foo.png)，会原样保留。

• 若是路径以 . 开头，将会被看做相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。

• 若是路径以 ~ 开头，其后的部分将会被看做模块依赖。这意味着你能够用该特性来引用一个 Node 依赖中的资源：

<img src="~some-npm-package/foo.png">

• 若是路径以 @ 开头，也会被看做模块依赖。若是你的 webpack 配置中给 @ 配置了 alias，这就颇有用了。全部 vue-cli 建立的项目都默认配置了将 @ 指向 /src

转换资源 URL 的好处是：

• file-loader 能够指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以得到更好的缓存。此外，这意味着 你能够就近管理图片文件，能够使用相对路径而不用担忧部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。

• url-loader 容许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减小小文件的 HTTP 请求数。若是文件大于该阈值，会自动的交给 file-loader 处理。

@ 别名在 .vue <style> 里没法加载图片的问题

github.com/vuejs/vue-l…

Scoped CSS

当 <style> 标签有 scoped 属性时，它的 CSS 只做用于当前组件中的元素。

<style scoped>
.example {
  color: red;
}
</style>
复制代码

<template>
  <div class="example">hi</div>
</template>
复制代码

转换结果：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>
复制代码

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>
复制代码

你能够在一个组件中同时使用有 scoped 和非 scoped 样式：

<style>
/* 全局样式 */
</style>
复制代码

<style scoped>
/* 本地样式 */
</style>
复制代码

深度做用选择器

若是你但愿 scoped 样式中的一个选择器可以做用得“更深”，例如影响子组件，你能够使用 >>> 操做符：

<style scoped>
.a >>> .b { /* ... */ }
</style>
复制代码

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }
复制代码

还有一些要留意

Scoped 样式不能代替 class。考虑到浏览器渲染各类 CSS 选择器的方式，当 p { color: red } 是 scoped 时 (即与特性选择器组合使用时) 会慢不少倍。若是你使用 class 或者 id 取而代之，好比 .example { color: red }，性能影响就会消除。

热重载

当使用脚手架工具 vue-cli 时，热重载是开箱即用的。

状态保留规则

• 当编辑一个组件的 <template> 时，这个组件实例将就地从新渲染，并保留当前全部的私有状态。可以作到这一点是由于模板被编译成了新的无反作用的渲染函数。

• 当编辑一个组件的 <script> 时，这个组件实例将就地销毁并从新建立。(应用中其它组件的状态将会被保留) 是由于 <script> 可能包含带有反作用的生命周期钩子，因此将从新渲染替换为从新加载是必须的，这样作能够确保组件行为的一致性。这也意味着，若是你的组件带有全局反作用，则整个页面将会被从新加载。

• <style> 会经过 vue-style-loader 自行热重载，因此它不会影响应用的状态。

代码校验 (Linting)

ESLint

stylelint stylelint.io/

Vue 单文件组件 (SFC) 规范 vue-loader 会解析文件，提取每一个语言块，若有必要会经过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 Vue.js 组件选项的对象。

选项参考

vue-loader.vuejs.org/zh/options.…

选项参考这个咱们下次再聊～