Webpack-dev-server doesn't generate source maps
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!
Use webpack -d
The d
flag stands for development shortcut and it enables all of your developer tools such as source maps.
Add {devtool:"source-map"}
to your webpack.config.js
See more here