build.sh

#!/bin/sh

./node_modules/.bin/webpack --config conf/webpack.app.production.js

dev.sh

#!/bin/sh

./node_modules/.bin/webpack-dev-server --config conf/webpack.app.dev.js --hot --progress --colors --inline --content-app ./build -v --port 8080

webpack.app.dev.js

module.exports = require('./webpack.app')({});

webpack.app.js

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

function extractForProduction(loaders) {
  return ExtractTextPlugin.extract('style', loaders.substr(loaders.indexOf('!')));
}

module.exports = function(options) {
  var cssLoaders = 'style!css!autoprefixer';
  var scssLoaders = cssLoaders + '!sass';

  if (options.production) {
    cssLoaders = extractForProduction(cssLoaders);
    scssLoaders = extractForProduction(scssLoaders);
  }

  var jsLoaders = ['jsx-loader', 'babel'];

  return {
    entry: './app/index.jsx',
    output: {
      path: options.production ? './dist' : './build',
      publicPath: options.production ? '' : 'http://localhost:8080/',
      filename: 'app.js',
    },
    module: {
      preLoaders: [],
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loaders: jsLoaders,
        },
        {
          test: /\.jsx$/,
          exclude: /node_modules/,
          loaders: options.production ? jsLoaders : ['react-hot'].concat(jsLoaders),
        },
        {
          test: /\.css$/,
          loader: cssLoaders,
        },
        {
          test: /\.scss$/,
          loader: scssLoaders,
        },
        {
          test: /\.png$/,
          loader: "url?limit=100000&mimetype=image/png",
        },
        {
          test: /\.svg$/,
          loader: "url?limit=100000&mimetype=image/svg+xml",
        },
        {
          test: /\.gif$/,
          loader: "url?limit=100000&mimetype=image/gif",
        },
        {
          test: /\.jpg$/,
          loader: "file",
        },
      ],
    },
    resolve: {
      extensions: ['', '.js', '.jsx'],
    },
    plugins: options.production ? [
      // Important to keep React file size down
      new webpack.DefinePlugin({
        "process.env": {
          "NODE_ENV": JSON.stringify("production"),
        },
      }),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false,
        },
      }),
      new ExtractTextPlugin("app.css"),
      new HtmlWebpackPlugin({
        template: './conf/app.html',
        production: true,
        filename: 'index.html'
      }),
    ] : [
      new HtmlWebpackPlugin({
        template: './conf/app.html'
      }),
    ],
  };
};

webpack.app.production.js

module.exports = require('./webpack.app')({
  production: true,
});