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!!

 
3
Kudos
 
3
Kudos

Now read this

stop copying files between git branches, switch to git worktrees

So this goes without saying but if you’re new to learning git been tirelessly in the weeds of some project where you need to copy files from one branch over to another, look no further. In quite a few instances, especially in the early... Continue →