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

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.