Getting React App Production Ready with Webpack

Question

I'm pretty new to using Webpack and I am trying to get my React app done in ES6 into an acceptable production ready size. The output file is still far too large, and also React is still outputting warnings (mostly about production files).

Can anyone help me trouble shoot what should be updated in my config file?

This is what I currently have.

var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_ENV || '0');

module.exports = {
  entry: "./app/App.js",
  output: {
    filename: "public/bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  plugins: PROD ? [
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: true }
    })
  ] : []
}

Answer 1

Here is my list of plugins for production builds:

plugins: [
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.DedupePlugin(),
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('production')
    }
  }),
  new webpack.optimize.UglifyJsPlugin({
    minimize: true,
    compress: {
      unused: true,
      dead_code: true,
      warnings: false,
      screw_ie8: true
    },
    compressor: {
      warnings: false
    }
  })
]

Moreover, if you find that the application is still pretty huge, what I've used is the Webpack bundle size analyzer (npm.js link). It will show you the list of used dependencies sorted by size, it really helped me to analyze and throw away stuff that I didn't actually need.