How to debug "webpack.config.js" file?

Question

I want to debug the "webpack.config.js" file, not the application using "devtool: 'source-map'". I want the webpack configuration file to be debugged. Is there any option?

Same as any other nodejs application. Or simply console.log. — dfsq
– dfsq, Commented Dec 30, 2016 at 13:22

Shivo'ham · Accepted Answer · 2023-11-27 05:02:19Z

38

Simply run webpack.js in debug mode using nodejs. You can run the following on your terminal (assuming you are already in the directory with your node_modules present):

node --inspect node_modules/webpack/bin/webpack.js --colors

I also found the VSCode debugger very intuitive for debugging when I was developing my own webpack loader. If you use VS Code you can have your launch.json have the following configuration:

{
        "type": "node", 
        "request": "attach",
        "name": "Attach",
        "port": 5858
}

Then run the node-inspector with the following command:

node --inspect-brk=5858 node_modules/webpack/bin/webpack.js --colors

Finally, run the debug configuration by going to the debug tab, pick your configuration at the top, and then press the run configuration button.

edited Nov 27, 2023 at 5:02

Shivo'ham

3,3403 gold badges22 silver badges42 bronze badges

answered Aug 21, 2017 at 16:38

asulaiman

1,28113 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ndh103 Over a year ago

Wonderful solution, it helped me to debug my Webpack.config file

gijswijs Over a year ago

You can point it to the webpack.config.js file, if that's needed: node --inspect-brk=9229 ./node_modules/webpack/bin/webpack.js --config webpack.config.js --colors

Collectives™ on Stack Overflow

How to debug "webpack.config.js" file?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related