Vue CLI 4.x, How to change rule loader which is before babel-loader and after ts-loader?

Question

I want to add async-catch-loader to auto inject try catch for my code. And my project was based on Vue CLI and TypeScript. So i need use webpack-chain to change the ts rule of webpack, which as show the below:

{
  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
      }
    },
  ]
},

But, i don't konw how to add async-catch-loader to ts rule which is before babel-loader and after ts-loader。Is webpack-chain has feature can do it?

Answer 1

I already have a answer for it. The webpack-chain hasn't provide the method to implement it. And so, i rewrite the ts rule, like this:

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()
}