webpack dev config with dev server, for react, latest greatest hot module reloading. Also uses postcss to compile our css (sass compatible), and image optimization

devServer.js

var WebpackDevMiddleware = require('webpack-dev-middleware');
var WebpackHotMiddleware = require('webpack-hot-middleware');
var historyApiFallback = require('connect-history-api-fallback');
var express = require('express');
var webpack = require('webpack');

var config = require('./webpack.config.dev');
var app = express();
var compiler = webpack(config);

app.use(historyApiFallback());

app.use(WebpackDevMiddleware(compiler, {
  quiet: false,
  noInfo: false,
  stats: {
    colors: true
  }
}));

app.use(WebpackHotMiddleware(compiler));

app.listen(4080, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening on http://localhost:4080'); //record companies are shady
});

webpack.config.dev.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: [
        'webpack-hot-middleware/client',
        './src/js/index.js'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/',
        filename: 'js/bundle.js'
    },
    resolve: {
        modulesDirectories: ['src', 'node_modules']
    },
    plugins: [
        new ExtractTextPlugin('css/bundle.css'),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            favicon: 'src/favicon.ico',
            inject: true,
            hash: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true
            }
        }),
        new webpack.NoErrorsPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        loaders: [{
                test: /\.js$/,
                loaders: ['babel'],
                include: path.join(__dirname, 'src')
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'url?limit=10000&hash=sha512&digest=hex&name=images/[hash].[ext]',
                    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
            }

        ]
    },
    postcss: function () {
      return [
        require('postcss-import')({ addDependencyTo: webpack }),
        require('postcss-url')(),
        require('precss')({'import': {disable: true}}),
        require('autoprefixer')({ browsers: ['last 2 versions'] })
      ];
    }

};