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.

I'd be very interested in how you figure this out as well. Currently trying to figure out how to just debug non-node JS that's been Webpack'd & uses TypeScript :( Let me know if you figure it out somehow! I'll do the same — Mark Pieszak - Trilon.io, Apr 13 '16 at 16:48
@MarkPieszak I m close to make it work, the only missing thing is to be able to update sourceRoot with webpack: https://github.com/webpack/webpack/issues/238#issuecomment-207065290 — Anthony Bobenrieth, Apr 14 '16 at 08:10

score 19 · Answer 1 · answered May 11 '16 at 10:25

19

Here is how i make it work:

Have VsCode atLeast 1.1.0 (older will struggle with sourceRoot)

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

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

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

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

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

answered May 11 '16 at 10:25

Anthony Bobenrieth

2,758
1
26
38

As of April 2017 with webpack 2.4.1 and TypeScript 2.1.5 this is still necessary. Wasted an hour of my life trying to figure this out till I read this comment. Thanks! – KhalilRavanna Apr 16 '17 at 19:42
3

This solution worked for me, outDir is now deprecated and replaced by outFiles, but it's easy to patch. – Ed_le_fou Jun 08 '17 at 09:07
Thanks. I lost a few hours on this as well. – Leonardo Alves Aug 15 '17 at 01:33
1

This got me _so close_, but didn't work. I read [this documentation](https://code.visualstudio.com/docs/nodejs/nodejs-debugging) which says that the outFiles attribute is an array of glob patterns. Adding a '*' to the end of my path made it work -- even without having the folder and file name match! – dpurrington Mar 10 '18 at 23:18
1

Tested in vscode 1.37.0, it seems we don't need to make the bundle filename same as entry filename any more. – icewind Apr 17 '20 at 01:25

Debug webpack bundled node ts with Visual Studio Code

1 Answers1

Linked