0

I started using webpack with my existing project and the bundle it generates is much bigger in size than before webpack. I am using all the optimisations I can think of and still it's around 60% bigger than before. I don't know what I am doing wrong.

my config:

'use strict';

// Modules
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//var jQueryPlugin = require('jquery');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//var Promise = require('es6-promise-polyfill').Promise;

module.exports = function makeWebpackConfig (options) {
    /**
     * BUILD is for generating minified builds
     */
    var BUILD = !!options.BUILD;

    var config = {};

    config.entry = {
        app: './app.js',
        iosCordova: ['./static/wrapper-resources/js/ios/cordova_all.js'],
        androidCordova: ['./static/wrapper-resources/js/android/cordova_all.js']
    };

    /**
     * Output
     */
    config.output = {
        // Absolute output directory
        path: __dirname + '/public',

        // Output path from the view of the page
        // Uses webpack-dev-server in development
        publicPath: 'http://localhost:8080/',

        filename: '[name].bundle.js',

        // non-entry

        chunkFilename: '[name].bundle.js'
    };
    if (BUILD) {
        config.devtool = 'source-map';
    } else {
        config.devtool = 'eval';
    }

    /**
     * Loaders
     */
    config.module = {
        noParse: /node_modules\/html2canvas/,
        preLoaders: [],
        loaders: [
            {
                // JS LOADER
                test: /\.js$/,              
                loader: 'babel?optional[]=runtime,cacheDirectory',
                presets: ['es2015'],
                plugins: ['transform-runtime'],
                exclude: [/node_modules/,
                    /cordova_all/
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                loader: 'file?name=[name].[ext]'
                //loader: 'url-loader'
            }, {
                test: /\.html$/,
                loader: 'raw'
            }]
    };

    var cssLoader = {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss', 'scss', 'sass')
    };
    config.module.loaders.push(cssLoader);

    config.postcss = [
        autoprefixer({
            browsers: ['last 2 version']
        })
    ];

    /**
     * Plugins
     */
    config.plugins = [

        // Extract css files
        new ExtractTextPlugin('[name].css')
        ,
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ];

    // build specific plugins
    if (BUILD) {
        config.plugins.push(
            new webpack.NoErrorsPlugin(),

            new webpack.optimize.DedupePlugin(),
            // Minify all javascript, switch loaders to minimizing mode
            new webpack.optimize.UglifyJsPlugin()
        )
    }

    /**
     * Dev server configuration
     */
    config.devServer = {
        contentBase: './public',
        stats: {
            modules: false,
            cached: false,
            colors: true,
            chunk: false
        }
    };  

    return config;
};
danny libren
  • 137
  • 2
  • 14
  • You didn't write down how you determined it's larger. – Mjh Dec 29 '15 at 13:24
  • the app.bundle.js is around 1MB while before the whole project was around 600KB – danny libren Dec 29 '15 at 13:28
  • That doesn't answer my question. **HOW** did you determine it's larger? What did you measure exactly, the bundle.js with what, folder where the entire project is? Did you take into account the images that your project contains while comparing sizes? – Mjh Dec 29 '15 at 14:40
  • I might not understand your question fully but no images or css and no cordova bundles, just the generated app.bundle.js. the images and everything else are in the public folder I am creating. – danny libren Dec 30 '15 at 08:47
  • Even after minifying, is it large? Webpack adds content of its own too while bundling. But still with minification you should have less size – Abhinav Singi Dec 30 '15 at 11:52

1 Answers1

0

I figured it out. When importing I didn't import the minified version of node modules. I guess webpack's minification and uglification just doesn't cut it. Thanks for the helpers.

danny libren
  • 137
  • 2
  • 14