I got my webpack generating a large main.js file (1.7mb) with a small project of ~20-30 files less than 100 lines each. The dependencies required are few in number (React, Fluxible) and I am using every optimize plugin I can understand:
module.exports = {
output: {
path: './build',
publicPath: '/public/',
filename: '[name].js'
},
debug: false,
devtool: 'eval',
target: 'web',
entry: [
'bootstrap-sass!./bootstrap-sass.config.js',
'./client.js',
],
stats: {
colors: true,
reasons: false
},
resolve: {
extensions: ['', '.js'],
alias: {
'styles': __dirname + '/src/styles',
'components': __dirname + '/src/scripts/components',
'actions': __dirname + '/src/scripts/actions',
'stores': __dirname + '/src/scripts/stores',
'constants': __dirname + '/src/scripts/constants',
'mixins': __dirname + '/src/scripts/mixins',
'configs': __dirname + '/src/scripts/configs',
'utils': __dirname + '/src/scripts/utils'
}
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style!css' },
{ test: /\.js$/, exclude: /node_modules/, loader: require.resolve('babel-loader') },
{ test: /\.json$/, loader: 'json-loader'},
{ test: /\.(png|svg|jpg)$/, loader: 'url-loader?limit=8192' },
{ test: /\.(ttf|eot|svg|woff|woff(2))(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?name=/[name].[ext]"},
{ test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader',
'css!sass?outputStyle=expanded&' +
"includePaths[]=" +
(path.resolve(__dirname, "./node_modules"))
)
}
]
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
}),
new ExtractTextPlugin("[name].css", {allChunks: true}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin()
],
};
What am I doing wrong or where can I further improve the size of the file?
You should set at least
That will help considerably with React.
In addition setting
devtool
tosource-map
is preferable in production environment. See official documentation for more information.You could try to inspect output using the analyse tool. To get the JSON it expects you'll need to do something like
webpack --json > stats.json
and then pass thatstats.json
to the tool. That might give you some insight.