Vue Loader学习

本文章用说到的配置是基于webpack。

安装

首先安装vue-loader 和 vue-template-compiler

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

webpack配置

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

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

处理资源路径

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

<img src="../image.png">

将被编译成：

createElement('img', {
  attrs: {
    src: require('../image.png') // 现在这是一个模块的请求了
  }
})

转换规则

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

• 如果路径是绝对路径 (例如 /images/foo.png)，会原样保留。
• 如果路径以 . 开头，将会被看作相对的模块依赖，并按照本地文件系统上的目录结构进行解析。
• 如果路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着可以用该特性来引用一个 Node 依赖中的资源：<img src="~some-npm-package/foo.png">
• 如果路径以 @ 开头，也会被看作模块依赖。如果 webpack 配置中给 @ 配置了 alias，这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src。

相关的Loader（了解）

• file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。
• url-loader 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理。

使用预处理器

其实这部分已经不算是vue loader，放在webpack讲会更好。都是一些loader和使用，webpack基础

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

Sass

使用此插件方便在.vue 文件的 <style lang="scss">中使用sass语法

lang属性也可以设为less，则需要安装less-loader，如果不设置则默认css的语法。

npm install -D sass-loader node-sass

webpack中配置：

每一个loader都有一个options属性来额外的配置

• indentedSyntax
  • Type：Boolean
  • Default：false
  • 开启关闭缩进语法。
• data
  • Type: String
  • Default: null
  • 共享全局变量，可以单声明也可以是读取文件方式。

module.exports = {
  module: {
    rules: [
      // ... 忽略其它规则

      // 普通的 `.scss` 文件和 `*.vue` 文件中的
      // `<style lang="scss">` 块都应用它
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
             loader: 'sass-loader',
             options: {
               indentedSyntax: true,
               // 也可以从一个文件读取，例如 `variables.scss`
        	   data: `$color: red;`
             }
          }
        ]
      }
    ]
  },
  // 插件忽略
}

Babel

npm install -D babel-core babel-loader

// webpack.config.js -> module.rules
{
  test: /\.js?$/,
  loader: 'babel-loader',
  // 过滤掉node_modules，原因上百度
  exclude: file => (
    /node_modules/.test(file) &&
    !/\.vue\.js/.test(file)
  )
}

Pug

介绍Pug是一款健壮、灵活、功能丰富的HTML模板引擎。

模板的处理会稍微有些不同，因为绝大对数 webpack 的模板类 loader，诸如 pug-loader，会返回一个模板函数而不是一个编译好的 HTML 字符串。所以需要使用一个返回原始的 HTML 字符串的 loader，例如 pug-plain-loader。

npm install -D pug pug-plain-loader

<template lang="pug">
div
  h1 Hello world!
</template>

// webpack.config.js -> module.rules
{
  test: /\.pug$/,
  // 当需要在 JavaScript 中将 .pug 文件作为字符串导入
  oneOf: [
    // 这条规则应用到 Vue 组件内的 `<template lang="pug">`
    {
      resourceQuery: /^\?vue/,
      use: ['pug-plain-loader']
    },
    // 这条规则应用到 JavaScript 内的 pug 导入
    {
      use: ['raw-loader', 'pug-plain-loader']
    }
  ]
}

Scoped Css(在.vue文件中使用)

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

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

热重载

简单来说，就是修改文件的时候会自动刷新页面，并且保持了应用程序和被替换组件的当前状态。

• 如果使用脚手架工具vue-cli时，热重载即用。
• 如果是使用webpack，则在package.json中添加--hot选项，热重载会在启动 webpack-dev-server --hot 服务时自动开启。详细看webpack配置–>webpack基础

状态保留规则

• 当编辑一个组件的 <template> 时，这个组件实例将就地重新渲染，并保留当前所有的私有状态。能够做到这一点是因为模板被编译成了新的无副作用的渲染函数。
• 当编辑一个组件的 <script> 时，这个组件实例将就地销毁并重新创建。(应用中其它组件的状态将会被保留) 是因为 <script> 可能包含带有副作用的生命周期钩子，所以将重新渲染替换为重新加载是必须的，这样做可以确保组件行为的一致性。这也意味着，如果自定义组件带有全局副作用，则整个页面将会被重新加载。
• <style> 会通过 vue-style-loader 自行热重载，所以它不会影响应用的状态。

关闭热重载

热重载默认是开启的，除非遇到以下情况：

• webpack 的 target 的值是 node (服务端渲染)
• webpack 会压缩代码（mode为发布模式）
• process.env.NODE_ENV === 'production'
  通过设置 hotReload: false 选项来显式地关闭热重载：

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        hotReload: false // 关闭热重载
      }
    }
  ]
}

CSS提取

请只在生产环境下使用 CSS 提取，因为便于在开发环境下进行热重载。

// webpack4
npm install -D mini-css-extract-plugin

// webpack3
npm install -D extract-text-webpack-plugin

// webpack.config.js
var MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  // 其它选项...
  module: {
    rules: [
      // ... 忽略其它规则
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV !== 'production'
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // ... 忽略 vue-loader 插件
    new MiniCssExtractPlugin({
      filename: 'style.css'
    })
  ]
}

代码校验（了解）

ESLint

进行 Vue 单文件组件的模板和脚本部分的代码校验。

• 第一种使用官方的eslint-plugin-vue

// .eslintrc.js
module.exports = {
  extends: [
    "plugin:vue/essential"
  ]
}

命令行运行：

eslint --ext js,vue MyComponent.vue

• 第二种：使用 eslint-loader

npm install -D eslint eslint-loader

// webpack.config.js
module.exports = {
  // ... 其它选项
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      }
    ]
  }
}

stylelint

支持在 Vue 单文件组件的样式部分的代码校验。

npm install -D stylelint-webpack-plugin

// webpack.config.js
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
  // ... 其它选项
  plugins: [
    new StyleLintPlugin({
      files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
    })
  ]
}