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