AngularJS with Webpack - Production Setup

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