Trying to bundle first React app - bundle is too big - reactjs

Question

I have first react app - which is 5.5Mb when using developer mode and devtool: "source-map". Now I tried to write webpack for distribution mode like this:
var webpack = require('webpack');
var path = require('path');
var fs = require('fs')
var BUILD_DIR = path.resolve(__dirname, 'public/javascripts');
var APP_DIR = path.resolve(__dirname, 'frontend');
const babelSettings = JSON.parse(fs.readFileSync(".babelrc"))
var config = {
entry: APP_DIR + '/app.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js',
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
use : ['babel-loader']
}
,
{
test: /\.css$/,
use: ["style-loader",{
loader: "css-loader",
options: {
minimize: true
}
}],
},
{
test: /\.less$/,
use: ["style-loader,less-loader"]
},
{
test: /\.svg$/,
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
loader: 'react-svg-loader',
query: {
jsx: true
}
}
],
exclude: /node_modules/
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true
}
})
]
};
babelSettings.plugins.push("transform-react-inline-elements");
babelSettings.plugins.push("transform-react-constant-elements");
module.exports = config;
I run it with :
webpack --config webpack-dist.config.js -p --progress --production --optimize-minimize
The output is still 2.2Mb which is unacceptable size.What config did I miss?
Edit packages.json looks like this:
{
"name": "project",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-3": "^6.22.0",
"babelify": "^7.3.0",
"browserify": "^13.3.0",
"css-loader": "^0.28.0",
"exorcist": "^0.4.0",
"gulp-livereload": "^3.8.1",
"gulp-sourcemaps": "^2.4.0",
"less": "^2.7.2",
"less-loader": "^2.2.3",
"react-edit-inline": "^1.0.8",
"react-image-fallback": "^4.0.1",
"react-scripts": "0.8.5",
"redux-devtools-extension": "^2.13.0",
"remote-redux-devtools": "^0.5.0",
"riek": "^1.0.7",
"style-loader": "^0.13.1",
"svg-react-loader": "^0.4.0-beta.2",
"vinyl-buffer": "^1.0.0",
"watchify": "^3.8.0",
"webpack": "^2.3.2"
},
"dependencies": {
"axios": "^0.16.0",
"barcoder": "^2.0.1",
"escape-string-regexp": "^1.0.5",
"frisbee": "^1.1.7",
"i18next": "^5.0.0",
"i18next-browser-languagedetector": "^1.0.1",
"i18next-xhr-backend": "^1.3.0",
"immutability-helper": "^2.1.1",
"lodash": "^4.17.4",
"qrcode.react": "^0.6.1",
"rc-time-picker": "^2.3.3",
"react": "^15.4.2",
"react-autosuggest": "^8.0.0",
"react-bootstrap": "^0.30.7",
"react-cards": "^0.2.2",
"react-collapse": "^2.3.3",
"react-cookie": "^1.0.4",
"react-dom": "^15.4.2",
"react-dropzone": "^3.10.0",
"react-height": "^2.2.0",
"react-highlight-words": "^0.6.0",
"react-i18next": "^2.0.0",
"react-infinite-scroller": "^1.0.4",
"react-input-autosize": "^1.1.0",
"react-isolated-scroll": "^0.1.0",
"react-loaders": "^2.3.0",
"react-motion": "^0.4.7",
"react-number-input": "^15.0.0-rc2",
"react-numeric-input": "^2.0.7",
"react-popover": "^0.4.4",
"react-preload": "^0.5.0",
"react-redux": "^5.0.2",
"react-redux-form": "^1.5.4",
"react-router-dom": "^4.0.0",
"react-select": "^1.0.0-rc.3",
"react-svg-loader": "^1.1.1",
"react-switch-button": "^2.1.1",
"react-tabs": "^0.8.2",
"react-tagsinput": "^3.14.0",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0",
"simple-react-pdf": "^1.0.6",
"style-it": "^1.5.5",
"throttle-debounce": "^1.0.1",
"validator": "^6.2.1"
},

Answer 1

Use the excellent Webpack Bundle Analyzer to look at what is taking up space in your build.
Also, try setting NODE_ENV=production before you run webpack, it makes a difference.

Answer 2

What decreased bundle size for me (with Webpack 4) is adding
module.exports = {
mode: 'production', // ← this
...
}
(inside webpack.config.js). From almost 1 MB to 158 kB.