How to get Webpack to use already existing source maps when generating source maps?

I have JavaScript code and source maps generated from TypeScript code (using tsc).

I then have a second compilation step which bundles the code using webpack.

I have enabled source maps in webpack.config.js:

module.exports = {
  devtool: "source-map"
}

The generated source map isn't entirely right.

Webpack is not taking into account the existing source maps that have been generated from TypeScript code.

This results in a mapping to the JavaScript code instead of the TypeScript code.

How can I get the Webpack source map to include existing mapping?

EDIT:

After renaming my question, and searching for my renamed question on Google, I found an answer.

You can use a preloader with webpack called source-map-loader: https://webpack.js.org/loaders/source-map-loader/

However, after installing source-map-loader and updating webpack.config.js to the following, the existing source maps are still not used:

module.exports = {
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ["source-map-loader"],
        enforce: "pre"
      }
    ]
  }
}

My guess is that because the files my existing source map point to are located outside the entry directory in webpack.config.js, they are ignored...?

from How to get Webpack to use already existing source maps when generating source maps?