How to use VS Code debugger with webpack-dev-server (breakpoints ignored)

From my experience (about 15 mins ago), if 'webpack.config.js' has a value for the context property, then that has to be accounted for for '.vscode/launch.json'.

For an example, if 'webpack.config.js' has the following:

module.exports = {  context: path.resolve(__dirname, 'src'),  entry: './index.ts',

Then launch.json needs that context ('src') too:

"url": "http://localhost:8080/","webRoot": "${workspaceRoot}/src","sourceMaps": true,

I just updated/fixed my repo so now TypeScript breakpoints should bind.

https://github.com/marckassay/VSCodeNewProject

I hope that helps.

For Webpack 4:
Install webpack-cli locally if you don't already have it installed (it has been pulled out of webpack).

Add the following VSCode debug configuration to your .vscode/launch.json (that's the file that VSCode opens when you click on the wheel icon in Debug view):

{  "type": "node",  "request": "launch",  "name": "build",  "program": "${workspaceFolder}/node_modules/.bin/webpack-cli",  "args": [    "--config",    "webpack.config.prod.js"  ],  "autoAttachChildProcesses": true,  "stopOnEntry": true}

stopOnEntry will make debugger stop in the very first (shebang) line of webpack.js, like this:

Old thread, but it still comes up in searches...

It feels like turning on "writing the generated code to disk" might be the solution here:As per https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-, add this to webpack.config.js:

module.exports = {  //...  devServer: {    writeToDisk: true  }};