可选项

Webpack 1 & 2 用法的差异

在 Webpack 1.x 中: 在 Webpack 配置的根节点上添加的 vue 块 :

module.exports = {
  // ...
  vue: {
    // vue-loader 选项
  }
}

在 Webpack 2 (^2.1.0-beta.25) 中:

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

loaders

• 类型: Object

*.vue 文件内的语言模块可通过 Webpack 的 loader 内的选项指定。若指定的话，该键对应于语言快的 lang 属性。默认 lang 值如下：

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

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

  // ...
  vue: {
    loaders: {
      js: 'babel!eslint'
    }
  }

postcss

• 类型: Array 或 Function 或 Object
• Object 格式只在 ^8.5.0 版本支持

在 *.vue 文件中为 CSS 指定自定义的 PostCSS 插件。如果使用方法 ，方法会被用于和 loaders 选项同样的位置，并且应该返回一个插件的数组。

  // ...
  vue: {
    // 注意: 不能嵌套在 `loaders` 选项内嵌套 `postcss`
    postcss: [require('postcss-cssnext')()],
    loaders: {
      // ...
    }
  }

该选项也能是个对象，该对象要包含的选项作为 PostCSS 处理器。当你使用依赖于自定义解析器处理 PostCSS 项目的时候，非常有用。

  postcss: {
    plugins: [...], // 插件数组
    options: {
      parser: sugarss // 使用 sugarss 解析器
    }
  }

cssSourceMap

• 类型: Boolean
• 默认: true

无论是否启用 CSS 代码源图。禁用此项可以避免一些在 css-loader 中的相对路径的 bug ，使运行更快。

如果 devtool 选项目前不在 Webpack 的配置中，它会自动设置成 false。

esModule

• 类型: Boolean
• 默认: undefined

无论是提供 esModule 兼容的代码。 默认 vue-loader 提供的是 CommonJS格式的 default export，像 module.exports = ....。 当 esModule 设置为 true，default export 会被转为 exports.__esModule = true; exports = ...。 对于代码的转换操作非常有用，比如 TypeScript。