Webpack Source Maps with vscode debugging

launch.json

// debug config for running project under vscode debugger
{
    "version": "0.2.0",
    "configurations": [
        {
            "trace": true,
            "name": "Chrome Debug",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8000/",
            "webRoot": "${workspaceRoot}/src/",  // folder containing webpack.config.js
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMaps": true,
            "disableNetworkCache": true,
            // we have multiple js source folders, so some source maps are still generated with webpack protocol links. Don't know why?
            "sourceMapPathOverrides": {  // if you override this, you MUST provide all defaults again
                "webpack:///./~/*": "${webRoot}/node_modules/*",  // a default
                "webpack:///./*":   "${webRoot}/js-src/*",        // unsure how/why webpack generates ./links.js
                "webpack:///../*": "${webRoot}/js-src/*",         // unsure how/why webpack generates ../links.js
                "webpack:///*":     "*"                           // a default, catch everything else
            }
        }
    ]
}

webpack.config.js

// source: ./js-src/<item>
// target: ./static/js-build/<item>
// Do not use uglify plugin when debugging, did not try to get source maps working with uglify

{
    resolve: {
        root: [  // older webpack config
            path.join(__dirname, '/js-src'),  // source at ./js-src/
        ]
    devtool: "source-map", // many options, but this one works best for me: https://webpack.js.org/configuration/devtool/
    output: {
        filename: '[name].js',
        path: path.join(__dirname, '/static/js-build'),  // compile to ./static/js-build
        devtoolModuleFilenameTemplate: 'file:///[absolute-resource-path]'  // map to source with absolute file path not webpack:// protocol
    }
}

Nice work jarshwah :)

thanks a ton. the devtoolModuleFilenameTemplate got me what I needed.

+1 for devtoolModuleFilenameTemplate. Thanks.

4 years later: thank you!!
I couldn't get together: Webpack + Typescript + nodejs (nestjs) + Webpack HMR (hot module replacement) + Debugging

devtoolModuleFilenameTemplate: 'file:///[absolute-resource-path]' was the last missing stone.

Another +1 for devtoolModuleFilenameTemplate. Thanks!

I am using Webpack + Typescript only as an extension module for our web app using non-webpack build tooling.
devtoolModuleFilenameTemplate: 'file:///[absolute-resource-path]' fixed the debug mode in VSCode.

+1, the devtoolModuleFilenameTemplate solution fixed our AngularJS+Lit+TypeScript+Webpack setup.

+1 for even now, thanks a bunch!

using Webpack + Typescript + nodejs(nestjs) + Webpack HMR just like jeromerg above
My project was missing devtool: "source-map" and devtoolModuleFilenameTemplate: 'file:///[absolute-resource-path]'
Works like a charm!

Lifesaver! the devtoolModuleFilenameTemplate: 'file:///[absolute-resource-path]' did the trick for me as well.
I was doing a complex set up with Nx + NestJS + Typescript + Webpack so was really hard to know where to look.

devtoolModuleFilenameTemplate did the trick for me after spending 4 hours trying every possible combination of sourceMapPathOverrides.
Why do these garbage Javascript bundlers make it so hard to get a FREAKING DEBUGGER WORKING MY GOD???