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 merging the ts output inside a single bundle.js with a side bundle.js.map:

↳web
  ↳dist
    ↳client
    ↳server
      ⇒bundle.js
      ⇒bundle.js.map
  ↳src
    ⇒server.ts
    ⇒client.ts

When i try to run it i m getting an error from VS UI:

request 'launch': cannot launch program '/home/.../web/src/server.ts'; setting the 'outDir' attribute might help

outDir works fine on my others projects (not using webpack) when output files are not merged, but here it doesnt help. Pretty sure he is looking for server.js (but there is only a bundle.js and its map file).

Is there any outFile option for generated single file ouput?

My launch.json:

{
        "name": "WebServer",
        "type": "node",
        "request": "launch",
        "program": "./web/src/server.ts",
        "stopOnEntry": false,
        "args": [],
        "cwd": "./web",
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development"
        },
        "externalConsole": false,
        "sourceMaps": true,
        "outDir": "./web/dist/server"
}

EDIT: It does run when i rename the webpack server output as server.js and server.map.js (instead of bundle.*), but the breakpoints are not working unfortunately:

Here is the content of the server.js.map file.

Both TS compiler and Webpack are configured to create sourcemap according to this tutorial.

Am i missing something?

EDIT2: The probleme with breakpoints seems to be the sources URI in the map file.

When i turn this

"webpack:///./src/server.ts",

into this

"../../src/server.ts",

breakpoints are working.

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]'
   }