AngularJS with Webpack - Production Setup

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

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.

Clinton
Clinton
~ 6 years ago

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

J.C. Francis III
J.C. Francis III
~ 5 years ago

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?

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

Did you try what I recommended in my response to your other comment? https://egghead.io/forums/lesson-discussion/topics/angular-with-webpack-requiring-templates#post-3602

Karin
Karin
~ 5 years ago
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.

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

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
Weston Ross
Weston Ross
~ 5 years ago

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]
Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

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