how to make webpack sourcemap to original files

Question

I'm trying to debug an application written in Angular 2 build from webpack with VScode. I'm able to use the debugger for chrome extension in VSCode to attach my application. And it did hit the break point of the compiled js file. But it cannot find the sourcemap files.

It seems that webpack will have a webpack:// to host the files which the *.js file pointed to, like in the image:

And I can set the breakpoint inside the ts files inside webpack folder. However vscode is not able to find the ts files. So I change the configuration of webpack to

output: {
  path:root('__build');
  devtoolModuleFilenameTemplate: function(info){
    return "file:///"+info.absoluteResourcePath;
  }
},

And then all files seemed to map to the absolute paths of the original ts files. And in chrome developer tool it looks like this:

But both chrome and vscode said the files inside this file:// is different from the original ts files. So I'm wondering whether there's a way that in webpack's configuration could make *.js file sourcemap to original ts files. And here's all my configurations:

typescript configuration:

{
  "compilerOptions": {
    "outDir": "dist",
    "target": "ES5",
    "module": "commonjs",
    "sourceMap": true
   }
}

webpack config:

{
  entry: "./src/app/bootstrap",
  output: {
    path: root('__build__'),
    filename: env({
       'development': '[name].js',
       'all': '[name].[hash].min.js'
        }),
    devtoolModuleFilenameTemplate: function(info){
       return "file:///"+info.absoluteResourcePath;
    }
  },
  devtool:'source-map',
  devServer: {
    contentBase: "public/"
  }
}

Another thing is that if in chrome developer tools, if I add the original files into the workspace and map the files from file:// to this folder, I can actually set breakpoints inside these files. So I'm wondering there's a way to map to local resources in vscode.

Answer 1

I changed this:

output: {
  // ...snip...
  devtoolModuleFilenameTemplate: function(info){
    return "file:///"+info.absoluteResourcePath;
  }
},

to this:

output: {
  // ...snip...
  devtoolModuleFilenameTemplate: function(info){
    return "file:///"+encodeURI(info.absoluteResourcePath);
  }
},

and now it encodes the spaces properly, and the sourcemap file works as expected.