The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Angular with Webpack - Production Setup

Angular with Webpack - Production Setup

2:05
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.
Watch this lesson now
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
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?