How to configure typescript sourcemap folder

Question

I'm able to use webpack and ts-loader to compile TypeScript to a single bundle with a global namespace and generate source map.

However, the source map is placed under ./src which is where the source code locate.

What I want to do is to change that location to <my global namespace / module name> because currently, it is not useful when the consuming application loads multiple modules.

For example, I create module-a which contains ./src/foo.ts and ./src/boo.ts. And I also create module-b which contains ./src/pak.ts and ./src/boo.ts

When I build the package, I expose them under window.ModuleA and window.ModuleB. The code work, but the source map messed up because both them have a file point to ./src/boo.ts.

It would be better if I can configure module-a source map pointing to module-a/* or ModuleA/*.

Here is my webpack config:

'use strict';
const path = require('path')

module.exports = {
  devtool: 'inline-source-map',

  entry: {
    'module-a': './src/index'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'module-a.js',
    library: 'ModuleA',
    libraryTarget: 'var'
  },
  resolve: {
    extensions: ['', '.ts', '.tsx', '.js']
  },
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        loader: 'source-map-loader'
      }
    ],
    loaders: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        include: [
          path.join(__dirname, 'src')
        ]
      }
    ]
  },
  ts: {
    configFileName: 'tsconfig.json'
  }
}

And tsconfig.json:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2015",
      "es2015.reflect",
      "dom"
    ],
    "declaration": false,
    "inlineSources": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "newLine": "LF",
    "noImplicitAny": false,
    "removeComments": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es5"
  },
  "files": [
    "src/index.ts"
  ],
  "include": [
    "typings/index.d.ts"
  ]
}

Answer 1

My current solution is to use compilerOptions.sourceRoot.

It will replace ./src to whatever you want.

However, webpack/ts-loader generates an additional path after it.

For example,

in module-a/src/foo.js.map, the sourceRoot is correctly module-a.

However, after bundle, the ./dist/module-a.js has source map reference of module-a/C:\Users\<user>\...\module-a\src.

I don't know whether should an issue be filed on webpack or ts-loader (most likely webpack), but at least for now the source maps of each module are organized under a different folder.

UPDATE: The issue mentioned above is fixed. This is a working solution.