Loader 进阶配置

你有时可能想实现：

  • 对语言应用自定义 loader string，而不是让 vue-loader 去推断；

  • 覆盖默认语言的内置 loader 配置。

  • 使用自定义 loader 预处理或后处理特定语言块。

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

注意 preLoaders 和 postLoaders 只在 10.3.0+ 版本支持
  1. module.exports = {
  2.   // other options...
  3.   module: {
  4.     // `module.rules` 与 1.x 中的 `module.loaders` 相同
  5.     rules: [
  6.       {
  7.         test: /\.vue$/,
  8.         loader: 'vue-loader',
  9.         options: {
  10.           // `loaders` 覆盖默认 loaders。
  11.           // 以下配置会导致所有无 `lang` 特性的 `<script>` 标签加载 `coffee-loader`
  12.           loaders: {
  13.             js: 'coffee-loader'
  14.           },
  16.           // `preLoaders` 会在默认 loaders 之前加载。
  17.           // 你可以用来预处理语言块——一个例子是用来处理构建时的 i18n
  18.           preLoaders: {
  19.             js: '/path/to/custom/loader'
  20.           },
  22.           // `postLoaders` 会在默认 loaders 之后加载。
  23.           //
  24.           // - 对于 `html`, 默认 loader 返回会编译为 JavaScript 渲染函数
  25.           //
  26.           // - 对于 `css`, 由`vue-style-loader` 返回的结果通常不太有用。使用 PostCSS 插件将会是更好的选择。
  27.           postLoaders: {
  28.             html: 'babel-loader'
  29.           }
  31.           // `excludedPreLoaders` 应是正则表达式
  32.           excludedPreLoaders: /(eslint-loader)/
  33.         }
  34.       }
  35.     ]
  36.   }
  37. }

进阶配置更实际的用法是提取组件中的 CSS 到单个文件。

原文: https://vue-loader-v14.vuejs.org/zh-cn/configurations/advanced.html