选项参考

优质

小牛编辑

122浏览

2023-12-01

选项放在哪里

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // `vue-loader` options
        }
      }
    ]
  }
}

loaders

类型：{ [lang: string]: string | Object | Array }

指定 webpack loader 对象覆盖用于 *.vue 文件内的语言块的默认 loader。如果指定，该键对应于语言块的 lang 属性。每种类型的默认 lang 是：

<template>: html
<script>: js
<style>: css

例如，使用 babel-loader 和 eslint-loader 处理所有的 <script> 块：

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          js: 'babel-loader!eslint-loader'
        }
      }
    }
  ]
}

你也可以使用对象或数组的语法 (注意这些选项必须是可序列化的)：

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          js: [
            { loader: 'cache-loader' },
            { loader: 'babel-loader', options: { presets: ['env'] } }
          ]
        }
      }
    }
  ]
}

preLoaders

类型：{ [lang: string]: string }
配置格式和 loaders 相同，但是 preLoaders 会在默认 loaders 之前处理。你可以用来预处理语言块 - 一个常见用例是用来处理构建时的 i18n。

postLoaders

类型：{ [lang: string]: string }
配置格式和 loaders 相同，但是 postLoaders 会在默认 loaders 之后处理。你可以用来后处理语言块。注意这会有些复杂：
- 对于 html，默认 loader 返回结果会被编译为 JavaScript 渲染函数。
- 对于 css，由vue-style-loader 返回的结果通常不太有用。使用 PostCSS 插件将会是更好的选择。

postcss

注意：这里推荐使用 PostCSS 配置文件代替，这样你的 *.vue 文件中的样式和普通的 CSS 样式可以共享相同的配置。用法和 postcss-loader 相同。

类型：Array or Function or Object
指定要应用于 *.vue 文件中 CSS 的自定义 PostCSS 插件。如果使用函数，函数将使用相同的 loader 上下文调用，并返回一个插件数组。
```
// ...
{
  loader: 'vue-loader',
  options: {
    // 注意：不要在 `loader` 下嵌入 `postcss` 选项
    postcss: [require('postcss-cssnext')()],
    loaders: {
      // ...
    }
  }
}
```
这个配置选项也可以是一个对象，这在使用依赖于自定义 parser/stringifiers 的项目会非常有用：
```
postcss: {
  plugins: [...], // list of plugins
  options: {
    parser: sugarss // use sugarss parser
  }
}
```

postcss.config

13.2.1 新增

类型：Object
默认值：undefined
这个字段允许用 postcss-loader 同样的方式自定义 PostCSS 插件。
- postcss.config.path
  指定一个加载 PostCSS 配置文件的路径 (文件或目录)。
```
postcss: {
  config: {
    path: path.resolve('./src')
  }
}
```
- postcss.config.ctx
  向 PostCSS 插件提供上下文。详见 postcss-loader 文档。

postcss.useConfigFile

13.6.0 新增

类型：boolean
默认值：true
设为 false 之后可以禁止自动加载 PostCSS 配置文件。

cssSourceMap

类型: Boolean
默认值: true
是否开启 CSS 的 source maps，关闭可以避免 css-loader 的 some relative path related bugs 同时可以加快构建速度。
注意，这个值会在 webpack 配置中没有 devtool 的情况下自动设置为 false。

postcss.cascade

14.2.0 新增

类型：boolean
默认值：false
设置为 true 的时候会开启层叠式加载 PostCSS 配置文件。比如，你可以在嵌套的源代码目录下放置额外的 .postcssrc 文件来为项目中不同的文件应用不同的 PostCSS 配置。

esModule

这个选项已经从 v14.0 中移除。在 v14.0 及以上版本中，*.vue 文件始终暴露为 ES 模块。

类型: Boolean
默认值: undefined
是否导出兼容 esModule 的代码，默认情况下 vue-loader 会导出 commonjs 格式，像 module.exports = ....。当 esModule 设置为 true 的情况下，导出会变为 exports.__esModule = true; exports = ...。适用于与 Babel 以外的 transpiler 互操作，比如 TypeScript。

preserveWhitespace

类型: Boolean
默认值: true
如果设置为 false，模版中 HTML 标签之间的空格将会被忽略。

compilerModules

类型：Array<ModuleOptions>
默认值：[]
为 vue-template-compiler 配置 modules 选项。相关细节请查阅 vue-template-compiler 的 modules 选项。

compilerDirectives

类型：{ [tag: string]: Function }
默认值：{} (v13.0.5+)
版本说明：在 v12.x 中，从 v12.2.3+ 开始支持
为 vue-template-compiler 配置 directives 选项。相关细节请查阅 vue-template-compiler 的 directives 选项。

transformToRequire

类型: { [tag: string]: string | Array<string> }
默认值: { img: 'src', image: 'xlink:href' }
在模版编译过程中，编译器可以将某些属性，如 src 路径，转换为 require 调用，以便目标资源可以由 webpack 处理。默认配置会转换 <img> 标签上的 src 属性和 SVG 的 <image> 标签上的 xlink：href 属性。

buble

类型: Object
默认值: {}
配置 buble-loader 的选项 (如果存在)，并且 buble 编译传递模板渲染函数。
版本警告：在 9.x 版本中，模板表达式通过现在已经删除的 templateBuble 选项单独配置。
模板渲染函数编译支持一个特殊的变换 stripWith (默认启用)，它删除生成的渲染函数中的 with 用法，使它们兼容严格模式。
配置例子：
```
module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        buble: {
          // same options
        }
      }
    }
  ]
}
```

extractCSS

12.0.0 新增

使用 extract-text-webpack-plugin 自动提取 CSS。适用于大多数预处理器，且也可在生产环境进行压缩。

传入的值可以是 true，也可以是插件的一个实例 (这样可以为多个提取的文件使用多个提取插件的实例)。

这应当只用于生产环境，以便可以在开发过程中使用热重载。

示例：

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

  module.exports = {
    // 其它选项……
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            extractCSS: true
          }
        }
      ]
    },
    plugins: [
      new ExtractTextPlugin("style.css")
    ]
  }

或者传递插件的一个实例：

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

  module.exports = {
    // 其它选项……
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            extractCSS: plugin
          }
        }
      ]
    },
    plugins: [
      plugin
    ]
  }

optimizeSSR

12.1.1 新增

类型: boolean
默认值: 当 webpack 配置中包含 target: 'node' 且 vue-template-compiler 版本号大于等于 2.4.0 时为 true。
开启 Vue 2.4 服务端渲染的编译优化之后，渲染函数将会把返回的 vdom 树的一部分编译为字符串，以提升服务端渲染的性能。在一些情况下，你可能想要明确的将其关掉，因为该渲染函数只能用于服务端渲染，而不能用于客户端渲染或测试环境。

hotReload

13.5.0 新增

类型: boolean
默认值: 在开发环境下是 true，在生产环境下或 webpack 配置中有 target: 'node' 的时候是 false。
允许的值: false (true 会强制热重载，即便是生产环境或 target: 'node' 时)
是否使用 webpack 的模块热替换在浏览器中应用变更而不重载整个页面。用这个选项 (值设为 false) 在开发环境下关闭热重载特性。

threadMode

14.2.0 新增

类型：boolean
默认值：false
设置为 true 的时候会开启基于文件系统的选项缓存，使得主 vue-loader 的选项可以分享给其它线程中的子 loader。
只在和 HappyPack 或 thread-loader 配合使用的时候才用得到。