I'm new to webpack. Can't figure why is it compiles such a heavy bundle.js. Even for the smalest of your examples, todos-with-undo it's 1.9 MB! For other more complex examples it's about 2.5 MB. There's definitely something wrong in the configuration.
Great job by the way :)
There's nothing wrong per se, the examples are just not configured for production. We aren't likely to do this here to avoid the maintenance burden鈥攑lease consult fuller Webpack boilerplates for examples of production configs.
At the very least you'll want to do this in production:
devtool from 'eval' to 'source-map'webpack.DefinePlugin to set process.env.NODE_ENV to 'production' webpack.optimize.UglifyJsPlugin for minificationNODE_ENV=production so .babelrc doesn't enable react-transformA typical Webpack production config might look like this:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'src')
}]
}
};
Here is a boilerplate including a production mode if you're interested.
The best way should be AsyncRoute. We should bundle the template/css/js of a component together to avoid multiple requests, but load it on demand.
Having devtool as inline-source-map instead of just source-map will also bulk the output file by putting the source map (surprise) inline. Obvious, but I overlooked this and it took me an hour to figure out so I'm putting it here for general future reference
Most helpful comment
There's nothing wrong per se, the examples are just not configured for production. We aren't likely to do this here to avoid the maintenance burden鈥攑lease consult fuller Webpack boilerplates for examples of production configs.
At the very least you'll want to do this in production:
devtoolfrom'eval'to'source-map'webpack.DefinePluginto setprocess.env.NODE_ENVto'production'webpack.optimize.UglifyJsPluginfor minificationNODE_ENV=productionso.babelrcdoesn't enablereact-transformA typical Webpack production config might look like this:
Here is a boilerplate including a production mode if you're interested.