ts-loader vs babel-loader in Typescript using webpack

Question

So I was trying to compare the output compiled code by these 2 combinations.

ts-loader

  {
    test: /\.tsx?$/,
    use: 'ts-loader',
  }

babel-loader

  use: {
      loader: 'babel-loader',
      options: {
        presets:
          [
            "@babel/preset-react",
            "@babel/preset-typescript",
          ]
      }
    }

• I get compiling times for babel-loader lower than for ts-loader.
• Also, ts-loader looks to be using babel under the hood, at least it's in its dependencies.
• Also, babel-loader allows to use cache with cacheDirectory

Questions

1. Is there any way to use cache in ts-loader like the cacheDirectory in babel?
2. Any other benefits in using ts-loader instead of babel-loader?

Armagnac

I am going to start a bounty because I am interested in this topic and seeing the upvotes I guess there are more people interested too. – Armagnac

Have you read this article? kevinwil.de/… – Bridgettebridgewater

For your first question, there is a config option for ts-loader, but it seems like it has experimental in its name, so I wouldn't depend on it. For your 2nd question, I haven't used ts-loader simply because babel-loader offered everything and more in a single package. Even if I had used ts-loader, I would've still needed babel to do other transformations. This would help – Diggs

Answer 1

for your questions:

1. As someone already mentioned, there is an experimental setting in ts-loader to allow cache, you can check out configuration reference for more information: https://github.com/TypeStrong/ts-loader#experimentalfilecaching
2. Afaik babel does not do typechecking on its own, so you would have to run TSC for that. Also it does not support 'const enum' syntax of ts...

Also you can mix the 2, have ts-loader for dev and babel for prod builds.

Objectionable