webpack 4 vscode debugger  

After going through several configurations, I still couldn’t figure out how to set up a multi-entry webpack configuration to debug my configuration files and my application. As it turns out it was quite simple with one caveat – so I just wanted to share this setup if you run into this issue.

Installation #

Make sure you have the chrome debugger extentsion installed.

Setup #

Here’s my launch.json config file:

            "type": "node",
            "request": "launch",
            "name": "webpack",
            "runtimeExecutable": "node",
            "program": "${workspaceFolder}/node_modules/.bin/webpack-cli",
            "args": [
            "restart": false,
            "autoAttachChildProcesses": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "outFiles": ["${workspaceFolder}/src/main/webapp/media/cache/builds"],
            "sourceMaps": true,
            "stopOnEntry": false

Not all fields are required. The main point to remember is instead of using npm scripts you’re running the node launcher so all arguments you pass in your package.json will now be specified here.

Hope this helps. Happy webpacking!!


Now read this

on giving back

Last year I set some personal goals to be a better mentor to the makers that have helped me along my journey into my professional role today. I’ve had developers spend their Friday evenings in lieu of long holidays helping me solve... Continue →