This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Angular with Webpack - Production Source Maps

1:51 Angular 1.x lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Lars Rye Jeppesen

Thanks, I'm gonna play around with WebPack after having viewed this series.

Been using Gulp most of the time, but especially being able to reference templates indenpendently of the location of the folder in which it resides, is a huge huge win.

Btw, your podcast is great as well, I'm a dedicated listener :)

In reply to egghead.io
Avatar
Kent C.

Hi Lars!

Glad to hear you enjoyed the series. I moved from gulp to webpack in January and it's been amazing. Webpack can be a bit of a beast to get set up initially (something I'm trying to remedy with this series), but once you've got it in place, it's amazingly simple and powerful.

I'm glad you enjoy the podcast!! :D

In reply to Lars Rye Jeppesen
Avatar
Paul

Just a brilliant series. Thanks Kent.

Avatar
Kent C.

Thanks Paul!

In reply to Paul
Avatar
janppires

Hi Kent!

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

Avatar
Kent C.

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

In reply to janppires
Avatar
janppires

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

In reply to Kent C.
Avatar
Kent C.

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

In reply to janppires

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?