Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Angular with Webpack - Production Source Maps

    Kent C. DoddsKent C. Dodds

    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.

    angularjsAngularJS
    webpackwebpack
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss