AngularJS with Webpack - Production Source Maps

[00:00] 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.

[00:21] 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.

[00:43] 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.

[01:08] 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.

[01:27] 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.