There seems to be very little “straight forward” posts on how to do this, so I just wanted to leave myself a little note and screenshot on how to do this.
When building new style single page applications, webpack is a utility that is commonly used. It’s confusing, it’s a lot to take in, angular-cli simplifies it, and uses webpack under the hood I think, I’m not positive on that, but I trust myself when I looked into the cli, and it seemed like it was using webpack, but do your own research on that one.
Getting to the point. Lets say you run something like:
npm start
in which you have a package.json that looks like this:
...
"scripts": {
"build:dev": "cross-env CONFIG_URL=config/development.config.js webpack --config config/webpack.dev.js --progress --profile",
"server:dev": "cross-env CONFIG_URL=config/stg.config.js webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",
"server": "npm run server:dev",
"start": "npm run server:dev",
"webpack-dev-server": "webpack-dev-server",
"webpack": "webpack"
}
...
You’ve got a couple of things going on here, when you run “npm start” it executes “npm run server:dev”, then we have an entry for “server:dev” that runs more stuff, we add some environment params, and then it executes the real command webpack-dev-server.
So when you run that at command the real thing running is webpack-dev-server, so when you play it in webstorm how do you debug it? say you want to change some of the webpack scripts you have going on, or you want to increment a version number every time you run a build.
The key here being that your Javascript file is going to execute the ./node_modules/webpack-dev-server/bin/webpack-dev-server.js file, if you want to do it against the webpack command line, it would be “./node_modules/webpack/bin/webpack.js”
Debugging global commands
Lets say your doing something like “node-lambda run”, where the command line that you execute is, you need to do something first, go to command line (in mac, not sure how to do this on windows), and execute:
“which node-lambda”
> /usr/local/bin/node-lambda
This will tell you where that global file is running from, now all you need to do is execute that path in webstorm, and you can now debug that.
The config to debug global commands for node will look like this:
Hopefully, people get some use out of this, its INCREDIBLY useful for figuring out what webpack is doing, or modifying those build scripts and adding some node functionality in there to do some custom stuff.
