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

Solution 1:

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.

Solution 2:

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:

Solution 3:

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
  }
};