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

Question

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...?

Answer 1

If you transpile the typescript as part of webpack, you will get the source maps with it.

devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: ([
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: 'tsconfig.json' }
          },

you need devTool: 'source-map' in webpack and the "sourceMap": true in tsconfig.json

devtool: 'cheap-module-eval-source-map', provides a faster build to generate source maps in development. But it will put the source mapping inline. So not for production.

So the big question. Why have a step separated from webpack?

If you use AOT compilation with angular (with the ngc command from @anguler/compiler), and produce .map files in the aot folder, then you want to reuse the map files. I can tell you I tested it to work with the solution below.

Then this will make it work:

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

And it is important you have sourceMap: true in tsconfig, and in the minimizer if you use one:

    optimization: {
        minimizer: [
          new TerserPlugin({
cache: true,
        parallel: true,
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        }

I have a tsconfig.json in development a tsconfig_ao1.json for ngc command I have a tsconfig_ao2.json to compile with aot the main.ts using the aot folder. And I use ngc outside of webpack because I could not use @ngtools/webpack inside webpack without issues.

If you are doing something else, you ened to understand the source-map-load will only load source maps if the files it test matches has source maps, and if the files art part of the tree loaded from the entry. There must be an import from the main.ts to the file that is source mapped.