先进的Loader配置

有时候你可能想：

  1. 将自定义加载程序字符串应用于语言，而不是让vue-loader推断它;

  2. 覆盖默认语言的内置加载程序配置;

  3. 使用自定义加载程序预处理或后处理特定语言块。

为此，为vue-loader指定loaders选项：

注意，preLoaders和postLoaders只在 >=10.3.0中支持

Webpack 2.x

  1. module.exports = {
  2.   // 其余选项...
  3.   module: {
  4.     // module.rules与1.x中的module.loaders相同
  5.     rules: [
  6.       {
  7.         test: /\.vue$/,
  8.         loader: 'vue-loader',
  9.         options: {
  10.           //`loaders`将覆盖默认加载器。
  11.           //以下配置将导致所有<script>标签没有“lang”
  12.           //属性将通过coffee-loader加载
  13.           loaders: {
  14.             js: 'coffee-loader'
  15.           },
  17.           //`preLoaders`附加在默认加载器之前。
  18.           //你可以使用它来预处理语言块 - 一种常见的用法
  19.           // case将是构建时间i18n。
  20.           preLoaders: {
  21.             js: '/path/to/custom/loader'
  22.           },
  24.           //`postLoaders`附加在默认加载器之后。
  25.           //
  26.           // - 对于`html`，默认加载器返回的结果
  27.           //   将编译的JavaScript渲染函数代码。
  28.           //
  29.           // - 对于`css`，结果将由vue-style-loader返回
  30.           //   这在大多数情况下不是特别有用。 使用postcss
  31.           //   插件将是一个更好的选择。
  32.           postLoaders: {
  33.             html: 'babel-loader'
  34.           }
  35.         }
  36.       }
  37.     ]
  38.   }
  39. }

Webpack 1.x

  1. // webpack.config.js
  2. module.exports = {
  3.   // 其余配置项...
  4.   module: {
  5.     loaders: [
  6.       {
  7.         test: /\.vue$/,
  8.         loader: 'vue'
  9.       }
  10.     ]
  11.   },
  12.   // vue-loader 配置
  13.   vue: {
  14.     loaders: {
  15.       // 与上面相同的配置
  16.     }
  17.   }
  18. }

高级加载器配置的更实际用法是将组件内部的CSS提取到单个文件中。