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