[AngualrJS + Webpack] Production Source Maps

When you uglify your Angular code with Webpack's uglify plugin, debugging your application can be a nightmare. See how easy it is to add source maps to your bundle so you can easily debug even in production.

Add source map to the production:

if(process.env.NODE_ENV === "production"){
config.output.path = __dirname + "/dist";
config.plugins.push(new webpack.optimize.UglifyJsPlugin()); // Uglify js
config.devtool = 'source-map';
}

var webpack = require('webpack')
path = require('path');

path.resolve(__dirname, "app");

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: 'ng-annotate-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 + "/dist";
config.plugins.push(new webpack.optimize.UglifyJsPlugin()); // Uglify js
config.devtool = 'source-map';
}

module.exports = config;