When you uglify your Angular code with Webpack's uglify plugin, debugging your application can be a nightmare. See how easy it is to add source maps to your bundle so you can easily debug even in production.
Now that we have our app running in production, let's say that there's a situation where something breaks and we need to debug in production. Worst nightmare ever, especially when you don't have source maps built into your production app. It's very highly recommended that you enable source maps for your webpack configuration, because trying to debug this would be a total nightmare.
Let's go back to our webpack config. In production mode, we're going to say config.devtool equals source map. Then if we rerun npm run build, it's going to do our uglification and create our source maps for us. Let's go ahead and take a look at our dist. We now have a bundle.js.map.
Our bundle.js will tell the browser, "When the devtools are open, I want you to load this, and source map file." Let's go ahead and serve up http-server on our dist. If we refresh here, now we have this webpack://. Our source maps are in here, so we can look at our directives, KCD Hello.
We have source maps, and so we can add a breakpoint here. There I can take a look at the context of where I am, and debug much simpler. One thing to note, however, you are actually running minified code, and so I can't simply say, "VM," to get this VM reference here.
There is a little bit of that difficulty there, limitations with the browser, but for the most part, this is so much easier to read and reason about what's going on. You can step through your application logic, and understand what's going on. To add source maps to your production build, you simply set the devtool to source map, and it will add the source map file for you.
Just a brilliant series. Thanks Kent.
Thanks Paul!
Hi Kent!
How do you use map-sources with unit testing? Thanks!
Set devtool
when you're in test mode (I recommend eval
)
what are the differences between the options available? Is there any place that explains properly those options? The official documentation (https://webpack.github.io/docs/configuration.html) is not easy to understand. Different info I found on the internet, looks like people just chose randomly the options. Some of them simply do not work. I tried some options and the result mapping is completely wrong. The source shown do not match with the correct one.
Thanks
These are the available options. I agree that it's not 100% clear how things work. I recommend that in development you use eval
and in production you use source-map
:)