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