This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Angular with Webpack - Production Setup

2:05 Angular 1.x lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Clinton

On a windows machine, I had to change the "build" line in the package.json file to this to get it working:
"build": "SET NODE_ENV=production && webpack && cp app/index.html dist/index.html",

Avatar
J.C. Francis III

I can't even get the NODE_ENV variable to be recognized. For Windows 7, do I need to do something in System settings to add these node variables?

Avatar
Karin
new webpack.DefinePlugin({
      ON_TEST: process.env.NODE_ENV === 'test'
    })

How can I access ON_TEST from my angular code? For some reason I thought it would get attached to the window element, but it is not there.

Avatar
Kent C.

If you see in my video I just use it as-is. webpack will replace it with something at build time. So you wont be able to get it off of the window (though you could easily assign it to a variable on the window):

window.ON_TEST = ON_TEST
In reply to Karin
Avatar
Weston Ross

WebPack works fine after I update all the npm dependancies, however still throws an error after:

ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token: keyword (default) [./directives/index.js:1,0]
Avatar
Kent C.

You'll see this message when UglifyJS can't parse your code. This particular message makes me think that you're not transpiling ES6 modules (default is a keyword for ES6 modules). Make sure that you're transpiling modules with Babel (or Webpack 2 beta which understands and transpiles ES6 modules).

In reply to Weston Ross

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.

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.

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.

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

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.

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.

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