Use webpack-dev-server -d
-d
is shorthand for--debug --devtool source-map --output-pathinfo
.-
output-pathinfo
adds comments to the generated bundle that explain what module/files are included in what places. So in the generated code, the comment is added to this line of code:require(/* ./test */23)
which says that23
is pointing to thetest
module. This is mostly helpful when you’re looking at the code Webpack has generated, and not so much when stepping through the debugger. I got this example from this relevant bit of documentation. -
This all works because
webpack-dev-server
accepts all the same flags aswebpack
. - See this section in the docs for details.
Tips & gotchas
--content-base
– by default the dev server will serve files in the directory you run the command in. If your build files are inbuild/
, you need to specify--content-base build/
so the dev server will serve up files in thebuild
directory--inline
– auto-reload whenever you save a file with some changes!