2. Vue-loader起步

1. Vue Loader简介

Vue Loader 是一个 webpack 的 loader，它允许以一种名为单文件组件 (SFCs).vue的格式撰写 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 应用。

2. Vue CLI 中的vue-loader

如果不想手动设置 webpack，推荐使用 Vue CLI 直接创建一个项目的脚手架。通过 Vue CLI 创建的项目会针对多数常见的开发需求进行预先配置，做到开箱即用。

如果 Vue CLI 提供的内建没有满足需求，或者打算从零开始创建自己的 webpack 配置，可以手动设置。

3. 手动设置vue-loader

3.1 安装vue-loader

应该将 vue-loader 和 vue-template-compiler 一起安装——除非是使用自行 fork 版本的 Vue 模板编译器的高阶用户：

npm install -D vue-loader vue-template-compiler

vue-template-compiler 需要独立安装的原因是可以单独指定其版本。

每个 vue 包的新版本发布时，一个相应版本的 vue-template-compiler 也会随之发布。编译器的版本必须和基本的 vue 包保持同步，这样 vue-loader 就会生成兼容运行时的代码。这意味着每次升级项目中的 vue 包时，也应该匹配升级 vue-template-compiler。

3.2 Vue Loader对应的webpack 配置

Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，请确保在webpack 配置中添加 Vue Loader 的插件：

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

这个插件  的职责是将定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果有一条匹配 /.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。

一个更完整的 webpack 配置示例：

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 块
      {
        test: /.js$/,
        loader: 'babel-loader'
      },
      // 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件来施展魔法
    new VueLoaderPlugin()
  ]
}

也可以在选项参考查阅所有可用的 loader 选项。