Vue Loader

时间 2019-11-13

标签 vue loader 繁體版

原文原文链接

介绍

容许为 Vue 组件的每一个部分使用其它的 webpack loader，例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug（模板引擎）
容许在一个 .vue 文件中使用自定义块，并对其运用自定义的 loader 链；

起步

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

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

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的热重载
          'css-loader'    // 用来处理css中的资源路径为模块，同时支持CSS Modules（<style module>）
        ]
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件来施展魔法。它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，若是你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。
    new VueLoaderPlugin()
  ]
}

选项参考?是vue loader的选项吗？

处理资源路径

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

<img src="../image.png">
// 编译成
createElement('img', {
  attrs: {
    src: require('../image.png') // 如今这是一个模块的请求了
  }
})

默认下列标签/特性的组合会被转换，且这些组合时可使用 transformAssetUrls 选项进行配置的。

{
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: 'xlink:href'
}

若是你配置了为 <style> 块使用 css-loader，则你的 CSS 中的资源 URL 也会被同等处理。

转换规则

若是路径是绝对路径 (例如 /images/foo.png)，会原样保留。
若是路径以 . 开头，将会被看做相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。
若是路径以 ~ 开头，其后的部分将会被看做模块依赖。这意味着你能够用该特性来引用一个 Node 依赖中的资源
若是路径以 @ 开头，也会被看做模块依赖。若是你的 webpack 配置中给 @ 配置了 alias，这就颇有用了。全部 vue-cli 建立的项目都默认配置了将 @ 指向 /src。

使用预处理器

style中会根据 lang 特性以及你 webpack 配置中的规则自动推断出要使用的 loader

Sass

npm install -D sass-loader node-sass


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

      // 普通的 `.scss` 文件和 `*.vue` 文件中的
      // `<style lang="scss">` 块都应用它
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // 插件忽略
}

可以 import 'style.scss' ?

Sass vs SCSS

SCSS是Sass 3引入的新语法，为了向css3靠拢
sass-loader 会默认处理不基于缩进的 scss 语法。为了使用基于缩进的 sass 语法，你须要向这个 loader 传递选项：

// webpack.config.js -> module.rules
{
  test: /\.sass$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        indentedSyntax: true
      }
    }
  ]
}

共享全局变量

sass-loader 也支持一个 data 选项，这个选项容许你在全部被处理的文件之间共享常见的变量，而不须要显式地导入它们：

// webpack.config.js -> module.rules
{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        // 你也能够从一个文件读取，例如 `variables.scss` ?
        data: `$color: red;`
      }
    }
  ]
}

Less

npm install -D less less-loader

// webpack.config.js -> module.rules
{
  test: /\.less$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'less-loader'
  ]
}

Stylus

npm install -D stylus stylus-loader

// webpack.config.js -> module.rules
{
  test: /\.styl(us)?$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'stylus-loader'
  ]
}

PostCSS

PostCSS 的配置能够经过 postcss.config.js 或 postcss-loader 选项来完成。postcss-loader 也能够和上述其它预处理器结合使用。
Vue Loader v15 再也不默认应用 PostCSS 变换。你须要经过 postcss-loader 使用 PostCSS。

npm install -D postcss-loader

// webpack.config.js -> module.rules
{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { importLoaders: 1 }
    },
    'postcss-loader'
  ]
}

Babel

Babel 的配置能够经过 .babelrc 或 babel-loader 选项来完成。

npm install -D babel-core babel-loader

// webpack.config.js -> module.rules
{
  test: /\.js?$/,
  loader: 'babel-loader'
}

排除 node_modules

若是你导入一个 node_modules 内的 Vue 单文件组件，它的 <script> 部分在转译时将会被排除在外。
为了确保 JS 的转译应用到 node_modules 的 Vue 单文件组件，你须要经过使用一个排除函数将它们加入白名单：

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: file => (
    /node_modules/.test(file) &&
    !/\.vue\.js/.test(file)    // 正则匹配.vue.js后缀的文件，是由于.vue被vue loader处理后js会生成后缀未.vue.js的js吧
  )
}

TypeScript

TypeScript 的配置能够经过 tsconfig.json 来完成。

npm install -D typescript ts-loader

// webpack.config.js
module.exports = {
  resolve: {
    // 将 `.ts` 添加为一个可解析的扩展名。
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      // ... 忽略其它规则
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: { appendTsSuffixTo: [/\.vue$/] }
      }
    ]
  },
  // ...plugin omitted
}

pug

模板的处理会稍微有些不一样，由于绝大对数 webpack 的模板类 loader，诸如 pug-loader，会返回一个模板函数而不是一个编译好的 HTML 字符串
一个返回原始的 HTML 字符串的 loader，例如 pug-plain-loader

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

// webpack中
npm install -D pug pug-plain-loader

// webpack.config.js -> module.rules
{
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}

你还打算使用它在 JavaScript 中将 .pug 文件做为字符串导入，你须要在这个预处理 loader 以后链上 raw-loader

// webpack.config.js -> module.rules
{
  test: /\.pug$/,
  oneOf: [    // 规则数组，当规则匹配时，只使用第一个匹配规则。
    // 这条规则应用到 Vue 组件内的 `<template lang="pug">`
    {
      resourceQuery: /^\?vue/,
      use: ['pug-plain-loader']
    },
    // 这条规则应用到 JavaScript 内的 pug 导入
    {
      use: ['raw-loader', 'pug-plain-loader']
    }
  ]
}

Scoped CSS

当 <style> 标签有 scoped 属性时，它的 CSS 只做用于当前组件中的元素。它经过使用 PostCSS 来实现如下转换（不是说再也不默认使用吗？）

<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 样式

子组件的根元素

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件能够从布局的角度出发，调整其子组件根元素的样式。

深度做用选择器

若是你但愿 scoped 样式中的一个选择器可以做用得“更深”，例如影响子组件，你可使用 >>> 操做符。有些像 Sass 之类的预处理器没法正确解析 >>>。这种状况下你可使用 /deep/ 操做符取而代之

<style scoped>
.a >>> .b { /* ... */ }
</style>
// 编译为
.a[data-v-f3f3eg9] .b { /* ... */ }

动态生成的内容

经过 v-html 建立的 DOM 内容不受 scoped 样式影响，可是你仍然能够经过深度做用选择器来为他们设置样式。

注意事项

当 p { color: red } 是 scoped 时 (即与特性选择器组合使用时) 会慢不少倍。若是你使用 class 或者 id 取而代之，好比 .example { color: red }，性能影响就会消除。

CSS Modules

vue-loader 提供了与 CSS Modules 的一流集成，能够做为模拟 scoped CSS 的替代方案。
CSS Modules经过对css中选择器的编译，来实现该种选择器在全局中的惟一性

用法

经过向 css-loader 传入 modules: true 来开启（vue-cli默认开启）

// webpack.config.js
{
  module: {
    rules: [
      // ... 其它规则省略
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
}

module 特性指引 Vue Loader 做为名为 $style 的计算属性，向组件注入 CSS Modules 局部对象。而后你就能够在模板中经过一个动态类绑定来使用它了：

<style module>    // 在你的 <style> 上添加 module 特性
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

<template>
  <p :class="$style.red">    // "red_1VyoJ-uZ"由开启时自定义生成的类名决定
    This should be red
  </p>
</template>

可选用法

若是你只想在某些 Vue 组件中使用 CSS Modules，你可使用 oneOf 规则并在 resourceQuery 字符串中检查 module 字符串（vue-cli好像默认开启，只有style拥有module属性才会是模块化样式）

// webpack.config.js -> module.rules
{
  test: /\.css$/,
  oneOf: [
    // 这里匹配 `<style module>`
    {
      resourceQuery: /module/,
      use: [
        'vue-style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[local]_[hash:base64:5]'
          }
        }
      ]
    },
    // 这里匹配普通的 `<style>` 或 `<style scoped>`
    {
      use: [
        'vue-style-loader',
        'css-loader'
      ]
    }
  ]
}

和预处理器配合使用

CSS Modules 能够与其它预处理器一块儿使用

// webpack.config.js -> module.rules
{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { modules: true }
    },
    'sass-loader'
  ]
}

自定义的注入名称

这时this下会绑定一个名为a得计算属性

<div :class='a.about'></div>


<style module="a">
  /* 注入标识符 a */
</style>

热重载

当你修改 .vue 文件时，该组件的全部实例将在不刷新页面的状况下被替换。它甚至保持了应用程序和被替换组件的当前状态！当你调整模版或者修改样式时，这极大地提升了开发体验。

状态保留规则

当编辑一个组件的 <template> 时，这个组件实例将就地从新渲染，并保留当前全部的私有状态。可以作到这一点是由于模板被编译成了新的无反作用的渲染函数。（template实际上被渲染为render函数，应该是没法比较函数之间的异同的，经过比较两个函数返回的v-node树的异同，来判断哪些节点须要销毁，热更新的效果应该和渲染的原理同样；只是生成新的渲染，它自己对传入的参数值没有任何改动，因此不会影响到其余元素的渲染效果，能够作到无反作用。生命周期钩子可能会在执行过程当中改变这些变量，因此必须整个组件销毁重建，来触发这些生命周期函数；当传入值prop改变时，组件内部没有变更，不会引发反作用，依然采用构建v-node树进行比较最小替换的方式）
当编辑一个组件的 <script> 时，这个组件实例将就地销毁并从新建立。(应用中其它组件的状态将会被保留) 是由于 <script> 可能包含带有反作用的生命周期钩子，因此将从新渲染替换为从新加载是必须的，这样作能够确保组件行为的一致性。这也意味着，若是你的组件带有全局反作用，则整个页面将会被从新加载。
<style> 会经过 vue-style-loader 自行热重载，因此它不会影响应用的状态。style的改变彷佛不会改变this.$style指向的对象，否则应该触发组件销毁重建的

用法

当手动设置你的工程时，热重载会在你启动 webpack-dev-server --hot 服务时自动开启。

关闭热重载

热重载默认是开启的，除非遇到如下状况
- webpack 的 target 的值是 node (服务端渲染)
- webpack 会压缩代码（生产环境？）
- process.env.NODE_ENV === 'production'
能够设置 hotReload: false 选项来显式地关闭热重载：

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

自定义块

在 .vue 文件中，你能够自定义语言块。应用于一个自定义块的 loader 是基于这个块的 lang 特性、块的标签名以及你的 webpack 配置进行匹配的。若是找到了一个自定义块的匹配规则，它将会被处理，不然该自定义块会被默默忽略。若是这个自定义块被全部匹配的 loader 处理以后导出一个函数做为最终结果，则这个 *.vue 文件的组件会做为一个参数被这个函数调用。
使用 resourceQuery 来为一个没有 lang 的自定义块匹配一条规则。例如为了匹配自定义块 <docs>：

//自定义loader用以处理docs标签
module.exports = function (source, map) {
    this.callback(
        null,
        `export default function (Component) {    // loader导出的函数，Component指向.vue文件（.vue文件的options好像被实例this继承，没有在其余文档看到，这个对象包含什么？）
        Component.options.__docs = ${
        JSON.stringify(source)
        }
      }`,
        map
    )
}

// webpack配置
{
  module: {
    rules: [
      {
        resourceQuery: /blockType=docs/,
        loader: require.resolve('./docs-loader.js')
      }
    ]
  }
}

// 子组件使用（@/components/HelloWorld.vue）
<docs>
This is the documentation for component B.
</docs>

// 父组件引用
import HelloWorld from '@/components/HelloWorld.vue'

HelloWorld.__docs    =>    JSON.stringify('This is the documentation for component B.')

CSS 提取

请只在生产环境下使用 CSS 提取，这将便于你在开发环境下进行热重载。（vue-cli中，开发环境css经过js动态写入head中，生产环境则会依据build和check分别打包）

webpack 4

npm install -D mini-css-extract-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
    })
  ]
}

webpack 3

这里应该须要对不一样开发环境配置不一样的webpack配置

npm install -D extract-text-webpack-plugin

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // 其它选项...
  module: {
    rules: [
      // ...其它规则忽略
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          use: 'css-loader',
          fallback: 'vue-style-loader'
        })
      }
    ]
  },
  plugins: [
    // ...vue-loader 插件忽略
    new ExtractTextPlugin("style.css")
  ]
}

代码校验

ESLint

官方的 eslint-plugin-vue 同时支持在 Vue 单文件组件的模板和脚本部分的代码校验。只须要在你的 ESLint 配置文件中使用该插件要导入的配置：

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

能够经过命令行用eslint校验某个.vue文件

eslint --ext js,vue MyComponent.vue

使用 eslint-loader开发过程当中每次保存的时候就会自动进行代码校验

npm install -D eslint eslint-loader

// webpack.config.js
module.exports = {
  // ... 其它选项
  module: {
    rules: [
      {
        enforce: 'pre',    // 请确保它是做为一个 pre-loader 运用的，loader的种类，影响执行的顺序，执行书序分为：后置(post)、行内(normal)、普通(inline)、前置(pre)
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      }
    ]
  }
}

stylelint

支持在 Vue 单文件组件的样式部分的代码校验。（vue-cli好像默认没装）
命令行校验

stylelint MyComponent.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}'],
    })
  ]
}

Vue Loader

介绍

起步

处理资源路径

转换规则

相关的 Loader

使用预处理器

Sass

Sass vs SCSS

共享全局变量

Less

Stylus

PostCSS

Babel

排除 node_modules

TypeScript

pug

Scoped CSS

混用本地和全局样式

子组件的根元素

深度做用选择器

动态生成的内容

注意事项

CSS Modules

用法

可选用法

和预处理器配合使用

自定义的注入名称

热重载

状态保留规则

用法

关闭热重载

自定义块

CSS 提取

webpack 4

webpack 3

代码校验

ESLint

stylelint