ES6 Angular 1.X + Webpack production build is huge (1.8 megs)

Question

I have been experimenting with ES6 / Angular 1.X & webpack. I cloned & made some minor mods to this repo: https://github.com/geniuscarrier/webpack-angular-es6

App works great....but when it comes time for production, the resulting bundle.js file is almost 2 megs.

I have go through several SO posts and have implemented some of the strategies suggested and nothing seems to work.

Anyone have any insight they can share? I would really appreciate it.

Here is my package.json:

{
    "name": "Webpack-Angular",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "npm run lint && NODE_ENV=test ./node_modules/.bin/karma start",
        "lint": "./node_modules/.bin/eslint app",
        "dev": "./node_modules/.bin/webpack-dev-server --content-base app",
        "build": "NODE_ENV=production webpack -p && cp app/index.html build/index.html && cp -r app/images build/images"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
            "angular": "^1.5.5",
            "angular-mocks": "^1.5.5",
            "angular-sanitize": "^1.5.5",
            "angular-ui-router": "^0.2.18",
            "autoprefixer-loader": "^3.2.0",
            "babel-core": "^6.7.7",
            "babel-loader": "^6.2.4",
            "babel-preset-angular": "^6.0.15",
            "babel-preset-es2015": "^6.6.0",
            "bootstrap": "^3.3.6",
            "chai": "^3.5.0",
            "css-loader": "^0.23.1",
            "eslint": "^2.2.0",
            "file-loader": "^0.8.5",
            "font-awesome": "^4.5.0",
            "jquery": "^2.2.3",
            "karma": "^0.13.22",
            "karma-chai": "^0.1.0",
            "karma-chrome-launcher": "^0.2.3",
            "karma-mocha": "^0.2.2",
            "karma-webpack": "^1.7.0",
            "mocha": "^2.4.5",
            "ng-annotate-loader": "^0.1.0",
            "ng-resource": "^1.3.2",
            "node-sass": "^3.6.0",
            "raw-loader": "^0.5.1",
            "sass-loader": "^3.2.0",
            "style-loader": "^0.13.1",
            "toastr": "^2.1.2",
            "url-loader": "^0.5.7",
            "webpack": "^1.13.0",
            "webpack-dev-server": "^1.14.1"
      }
  }

And here is the webpack config:

var DefinePlugin = require('webpack').DefinePlugin;
var ProvidePlugin = require('webpack').ProvidePlugin;
var optimize = require('webpack').optimize;

var definePlugins = new DefinePlugin({
    TEST: process.env.NODE_ENV === 'test',
    PRODUCTION: process.env.NODE_ENV === 'production'
});
var providePlugins = new ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    'windows.jQuery': 'jquery',
});

var config = {
    context: __dirname + '/app',
    entry: './index.js',
    output: {
        path: __dirname + '/app',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /(node_modules)/,
            loader: 'ng-annotate!babel'
        }, {
        test: /\.s?css$/,
        exclude: /(node_modules)/,
        loaders: ['style', 'css?sourceMap', 'autoprefixer', 'sass?sourceMap']
    }, {
        test: /\.html$/,
        loader: 'raw'
    }, {
        test: /\.(jpe?g|png|gif)$/,
        exclude: /(node_modules)/,
        loader: 'url?limit=10000'
    }, {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url?limit=10000&minetype=application/font-woff'
    }, {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url'
    }]
},
plugins: [
    definePlugins,
    providePlugins
],
resolve: {
    extensions: ['', '.js', '.css']
}
};

if (process.env.NODE_ENV === 'production') {
    config.output.path = __dirname + '/build';
    config.plugins.push(new optimize.UglifyJsPlugin());
}

module.exports = config;

Thank you.

ES6 Angular 1.X + Webpack production build is huge (1.8 megs)

Answers (1)

Related Questions