Debug webpack bundled node ts with Visual Studio Code

Question

(In some way related to this but more specific to VsCode)

I m trying to debug the AngularU starter kit with visual studio code. But it\'s

Answer 1

Here is how i make it work:

1. Have VsCode atLeast 1.1.0 (older will struggle with sourceRoot)

2. Set the bundle file the same name as its parent directory in webpack.config.js

   output: {
   path: path.join(__dirname, 'dist', 'server'),    
   filename: 'server.js'                         
   }, 
   

3. and set the parent dir as 'outdir' in launch.json:

   ...
   "sourceMaps": true,
   "outDir": "${workspaceRoot}/dist/server",
   "smartStep":true
   

4. Ask webpack to output absolute path for sourcemap in webpack.config.json

   output : {
   ...
   devtoolModuleFilenameTemplate        : '[absolute-resource-path]',
   devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
   }