Want more egghead?

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

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Angular with Webpack - Production Setup

    Kent C. DoddsKent C. Dodds

    Using Angular with webpack makes the production build a breeze. Simply alter your webpack configuration at runtime based on an environment variable, and you're good to go.

    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:02 We've this really awesome application. Let's go ahead and take a look at this. If we go to our local host, this is what we see Angular + Webpack, Hello Webpack in green. How awesome is that? We've got to deploy this out to the world. What we're going to do is we're going to modify this configuration if we're in production mode so that we can ship this off like a real production app.

    00:24 The first thing that we're going to do is let's take a look at our package.json. We already have this built script in here that sets the node environment to production so that we can tee off of this node environment to know how we need to modify our webpack configuration. We're copying the index.html to our "Dist." The dist is the folder that we're going to be distributing to our production application.

    00:46 Let's go ahead and respond to the node environment being production and send our bundle to the dist directory as well. In our webpack config, we're going to say "Var config equals that webpack config" that we had in the first place. At the bottom, we'll say module. module.exports equals config.

    01:02 We're going to modify this config if we're in production mode. We'll say, "If process.env.node_env equals production," then we're going to modify our output path. We'll say, "Config.output.path is now equal to dirname plus dist."

    01:25 Now, if I run npm run build, it will set the node environment to production and run our webpack configuration. Now, we can see we have a dist that has the index that was copied over and our bundle.js. If I just simply run an HTTP server over our dist, we can now look at local host 8080. This is being served up from our dist and the whole app is working great.

    01:51 That's how you modify your configuration for webpack for production deployment. You simply specify your node environment to production. You respond to that node environment inside of your webpack configuration.

    Discuss

    Discuss