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": [
                "--config",
                "webpack.config.js",
                "--mode",
                "development"
            ],
            "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!!