webpack v1 from Kent
AngularJS with Webpack - Production Setup
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.
[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.
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?
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
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.
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
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]
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).
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",