How to make stack traces clickable in VS code when using webpack

We discussed before how to use webpack in your Tabris.js project, and even how to make it work with source maps. A source map, among other things, makes the stack traces in the Tabris.js CLI console point to the right file and line.

However, if you configure webpack only via

it will print somewhat unusual stack lines like this:

It’s still human-readable, but in one regard, it’s inconvenient: In Visual Studio Code, you can usually hover a stack line, hold CTRL, and click it to jump to the corresponding file and line. Unfortunately, that doesn’t work with this format, which annoyed me quite a bit.

Here is how you fix it: In your webpack.config.js add the following to your “output” object:

Also, for me it was necessary to set mode to 'development' to make the line numbers match. I’m not sure why that is the case. Let me know if you do.

Finally, the stack trace is clickable again, getting you to the exact file, line, and column:

If you want to see the complete setup, look no further than this Tabris.js/TypeScript example project.