Vue CLI 4.x，如何更改 babel-loader 之前和 ts-loader 之后的规则加载器？答案

【问题标题】：Vue CLI 4.x, How to change rule loader which is before babel-loader and after ts-loader?Vue CLI 4.x，如何更改 babel-loader 之前和 ts-loader 之后的规则加载器？
【发布时间】：2021-03-03 12:18:00
【问题描述】：

我想为我的代码添加 async-catch-loader 以自动注入 try catch。我的项目基于 Vue CLI 和 TypeScript。所以我需要使用 webpack-chain 来改变 webpack 的 ts 规则，如下所示：

{
  test: /\.m?jsx?$/,
  enforce: 'pre',
  use: [
    {
      loader: '/Users/wjc/Documents/company/project/demos/async-test/node_modules/cache-loader/dist/cjs.js',
      options: {
        cacheDirectory: '/Users/wjc/Documents/company/project/demos/async-test/node_modules/.cache/ts-loader',
        cacheIdentifier: '41bf2514'
      }
    },
    {
      loader: '/Users/wjc/Documents/company/project/demos/async-test/node_modules/babel-loader/lib/index.js'
    },
    {
      loader: 'async-catch-loader',
      options: {
        catchCode: 'console.error(\'wujingchang\')'
      }
    }
    {
      loader: '/Users/wjc/Documents/company/project/demos/async-test/node_modules/ts-loader/index.js',
      options: {
        transpileOnly: true,
        appendTsSuffixTo: [
          '\\.vue$'
        ],
        happyPackMode: false
      }
    },
  ]
},

但是，我不知道如何将async-catch-loader 添加到ts 规则，即babel-loader 之前和ts-loader 之后。webpack-chain 是否有功能可以做到？

【问题讨论】：

标签： webpack vue-cli-4

【解决方案1】：

我已经有了答案。 webpack-chain 没有提供实现它的方法。因此，我重写了ts 规则，如下所示：

chainWebpack: (config) => {
  const tsRule = config.module.rule("ts");
  tsRule.uses.clear();
  tsRule
    .use("cache-loader")
      .loader("cache-loader")
      .end()
    .use("babel-loader")
      .loader("babel-loader")
      .end()
    .use("auto-inject-async-catch-loader")
      .loader("auto-inject-async-catch-loader")
      .tap(() => {
        return {
          catchCode: 'console.error(e)'
        }
      })
      .end()
    .use("ts-loader")
      .loader("ts-loader")
      .tap(() => {
        return {
                  transpileOnly: true,
                  appendTsSuffixTo: [
                    '\\.vue$'
                  ],
                  happyPackMode: false
                }
      })
      .end()
}

【讨论】：