AngularJS with Webpack - Production Source Maps

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

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.

[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.

Paul
Paul
~ 6 years ago

Just a brilliant series. Thanks Kent.

Kent C. Dodds
Kent C. Doddsinstructor
~ 6 years ago

Thanks Paul!

janppires
janppires
~ 5 years ago

Hi Kent!

How do you use map-sources with unit testing? Thanks!

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

Set devtool when you're in test mode (I recommend eval)

janppires
janppires
~ 5 years ago

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

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

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 :)