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

 

package.json:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --content-base app",
    "build": "set NODE_ENV=production && cp app/index.html build/index.html && webpack"
  },

 

In Windows, when you want to set Node env, you should do :

set NODE_ENV=production

//in Mac
NODE_ENV=production

 

Copy the index.html to the build dir:

cp app/index.html build/index.html 

 

Then run webpack, if u have installed the webpack globally, then just write:

webpack

 

 

webpack.config.js>

var webpack = require('webpack');

var config = {
    context: __dirname + '/app',
    entry: './index.js',
    output: {
        path: __dirname + '/app',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.DefinePlugin({
           ON_TEST: process.env.NODE_ENV === "test"
        })
    ],

    module: {
        loaders: [
            {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.html$/, loader: 'html-loader', exclude: /node_modules/},
            {test: /\.css$/, loader: 'style!css', exclude: /node_modules/},
            {test: /\.styl/, loader: 'style!css!stylus', exclude: /node_modules/}
        ]
    }
};

if(process.env.NODE_ENV === "production"){
    config.output.path = __dirname + "/build"
}

module.exports = config;