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

Question

My problem is simple.

I just want to make VS Code\'s debugger work with webpack-dev-server without ignoring my breakpoints.

Now, webpack-dev-server serves the bund

Answer 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.

Answer 2

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

Answer 3

If in case someone troubling with start-server-webpack-plugin of webpack:

I have recently stuck on the same issue and @MarkoBonaci's answer came to rescue. However, I stuck on another error which is produced by the webpack plugin: start-server-webpack-plugin.

Below is the error I got, when I launched by application via debugger of vscode:

cd /home/me/projects/villager-topics ; env "NODE_ENV=development" /home/me/.nvm/versions/node/v11.6.0/bin/node --inspect-brk=33538 node_modules/.bin/webpack-cli --colors --progress --config ./webpack.dev.js Debugger listening on ws://127.0.0.1:33538/d8bb6d64-a1a1-466e-9501-6313a3dc8bcf For help, see: https://nodejs.org/en/docs/inspector Debugger attached. clean-webpack-plugin: /home/rajeev/projects/villager-topics/dist has been removed. 10% building 1/1 modules 0 active webpack is watching the files…

98% after emitting StartServerPluginStarting inspector on 127.0.0.1:33538 failed: address already in use

As you can see StartServerPlugin is using the same port 33538 which is already taken by the parent process. So we need to tell StartServerPlugin to use some other port for its inspection initialization. This, we can achieve through the initialization of StartServerPlugin.

new StartServerPlugin({
  name: 'server.js',
  nodeArgs: ['--inspect=5858'], // allow debugging),
})

Here in nodeArgs we are specifying the inspect port as 5858. After this configuration is saved and then relaunch the application through Debugger of vscode, you will successfully start the application.

Answer 4

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: