Webpack Configuration

load-dev-middlewares.js

import { noop } from 'lodash';
import webpack from 'webpack';
import Dashboard from 'webpack-dashboard';
import DashboardPlugin from 'webpack-dashboard/plugin';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';

import config from '../webpack.config.dev';

export default function loadDevMiddlewares({ app }) {

    const compiler = webpack(config);

    const dashboard = new Dashboard();

    compiler.apply(new DashboardPlugin(dashboard.setData));

    app.use(
        webpackDevMiddleware(compiler, {
            noInfo: true,
            publicPath: config.output.publicPath,
            quiet: true,
            headers: {
                'Access-Control-Allow-Origin': '*'
            }
        }),
        webpackHotMiddleware(compiler, { log: noop })
    );
}

package.json

{
  "dependencies": {
    "bezier-easing": "1.1.1",
    "body-parser": "1.13.3",
    "classnames": "2.1.3",
    "connect-slashes": "1.3.1",
    "cookie-parser": "1.3.5",
    "cookies-js": "1.2.2",
    "express": "4.13.3",
    "express-useragent": "0.2.0",
    "history": "1.17.0",
    "hl-hal": "git+ssh://[email protected]/hautelook/hl-hal#v0.2.0",
    "http-status-codes": "1.0.5",
    "local-storage": "1.4.2",
    "lodash": "4.6.1",
    "moment": "2.14.1",
    "newrelic": "1.21.2",
    "on-finished": "2.3.0",
    "react": "15.0.2",
    "react-addons-css-transition-group": "15.0.2",
    "react-autosuggest": "3.7.4",
    "react-dom": "15.0.2",
    "react-motion": "0.4.4",
    "react-redux": "4.4.0",
    "react-router": "1.0.3",
    "react-swipeable-views": "0.6.4",
    "redux": "3.3.1",
    "regex-escape": "3.4.0",
    "request": "2.60.0",
    "simple-ajax": "2.5.0",
    "statsd-client": "0.1.0",
    "tcomb": "3.2.2",
    "tcomb-react": "0.9.1",
    "useragent": "2.1.7",
    "verror": "1.6.0",
    "winston": "2.2.0",
    "yamlparser": "0.0.2"
  },
  "devDependencies": {
    "babel": "6.3.26",
    "babel-cli": "6.3.17",
    "babel-core": "6.3.21",
    "babel-eslint": "4.1.8",
    "babel-loader": "6.2.0",
    "babel-plugin-react-transform": "2.0.0",
    "babel-plugin-transform-class-properties": "6.3.13",
    "babel-plugin-transform-runtime": "6.0.14",
    "babel-polyfill": "6.3.14",
    "babel-preset-es2015": "6.3.13",
    "babel-preset-react": "6.3.13",
    "babel-preset-react-hmre": "1.0.1",
    "babel-preset-stage-2": "6.3.13",
    "browsermob-proxy": "1.0.9",
    "css-loader": "0.23.0",
    "csswring": "4.0.0",
    "empty-loader": "1.0.1",
    "es5-shim": "4.1.10",
    "eslint": "1.10.3",
    "eslint-plugin-react": "3.5.1",
    "esprima": "2.7.0",
    "file-loader": "0.8.5",
    "frunt-api-mock": "git+ssh://[email protected]:hautelook/frunt-api-mock#v1.2.0",
    "fs-extra": "0.23.1",
    "glob": "5.0.15",
    "gulp": "3.9.0",
    "gulp-babel": "6.1.1",
    "gulp-concat": "2.6.0",
    "gulp-plumber": "1.0.1",
    "gulp-postcss": "6.0.1",
    "gulp-rev": "7.0.0",
    "gulp-rev-replace": "0.4.3",
    "gulp-sourcemaps": "1.6.0",
    "gulp-util": "3.0.6",
    "image-webpack-loader": "1.6.2",
    "imagemin": "3.2.2",
    "isparta-instrumenter-loader": "1.0.0",
    "jasmine-core": "2.3.4",
    "jasmine-node": "1.14.5",
    "json-loader": "0.5.4",
    "karma": "0.13.19",
    "karma-chrome-launcher": "0.2.1",
    "karma-cli": "0.1.2",
    "karma-coverage": "0.5.2",
    "karma-firefox-launcher": "0.1.6",
    "karma-jasmine": "0.3.6",
    "karma-nested-reporter": "0.1.3",
    "karma-safari-launcher": "0.1.1",
    "karma-sourcemap-loader": "0.3.6",
    "karma-threshold-reporter": "0.1.15",
    "karma-webpack": "1.7.0",
    "livereload": "0.3.7",
    "nightwatch": "0.9.5",
    "node-libs-browser": "0.5.2",
    "open": "0.0.5",
    "postcss": "5.0.10",
    "postcss-all-link-colors": "1.0.1",
    "postcss-bem-linter": "2.5.1",
    "postcss-browser-reporter": "0.4.0",
    "postcss-center": "1.0.0",
    "postcss-circle": "1.0.0",
    "postcss-clearfix": "0.2.0",
    "postcss-copy": "3.1.0",
    "postcss-cssnext": "2.2.0",
    "postcss-font-pack": "1.0.0",
    "postcss-import": "7.1.0",
    "postcss-loader": "0.8.0",
    "postcss-mixins": "2.1.1",
    "postcss-nested": "1.0.0",
    "postcss-nested-props": "1.1.0",
    "postcss-nested-vars": "0.0.2",
    "postcss-property-lookup": "1.1.4",
    "postcss-sprites": "2.0.3",
    "postcss-triangle": "1.0.1",
    "postcss-url": "5.0.2",
    "react-addons-test-utils": "15.0.2",
    "react-transform-catch-errors": "1.0.2",
    "react-transform-hmr": "1.0.4",
    "redbox-react": "1.2.2",
    "redux-mock-store": "1.1.2",
    "style-loader": "0.13.0",
    "through": "2.3.8",
    "watcher": "0.0.5",
    "webpack": "1.12.14",
    "webpack-dashboard": "0.1.4",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0",
    "yargs": "3.29.0"
  }
}

webpack.config.dev.js

var _ = require('lodash');
var webpack = require('webpack');
var glob = require('glob');
var path = require('path');
var productionConfig = require('./webpack.config.js');
var createPostcssProcessors = require('./styles/config/postcss-processors');

var babelConfig = require('./package').babel;
babelConfig.presets.push('react-hmre');

module.exports = {
    // Entry points for static analyzer:
    entry: merge(
        {
            lib: [
                'webpack-hot-middleware/client'
            ]
        },
        productionConfig.entry
    ),

    output: {
        // Where to put build results when doing production builds:
        // (Server doesn't write to the disk, but this is required.)
        path: __dirname,

        // Filename to use in HTML
        filename: '[name].js',

        // Path to use in HTML
        publicPath: '/public/js/'
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.optimize.CommonsChunkPlugin('lib', 'lib.js')
    ],

    resolve: {
        // Allow to omit extensions when requiring these files
        extensions: ['', '.js', '.jsx', '.json', '.css']
    },

    module: {
        loaders: [
            { test: /\.json$/, loaders: ['json'] },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: babelConfig
            },
            {
                test: /\.css$/,
                loader: 'style!css!postcss'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'file?name=[path][name].[ext]'
            }
        ]
    },
    postcss: function() {
        const sheetName = path.basename(this.resourcePath, '.css');
        return createPostcssProcessors.default.call(this, {
            env: 'development',
            stylesheetPath: 'styles/sheets',
            spritePath: 'public/images/sprites/sprite.png',
            groupBy: () => sheetName,
            hot: true
        });
    },
    devtool: '#inline-source-map',
    externals: { }
};

function merge(object, other) {
    return _.mergeWith(object, other, function(a, b) {
        if (_.isArray(a)) {
            return a.concat(b);
        }
    });
}

webpack.config.js

// Webpack configuration to use with the build task.

var _ = require('lodash');
var webpack = require('webpack');
var path = require('path');
var glob = require('glob');
var createPostcssProcessors = require('./styles/config/postcss-processors');

module.exports = {
    devtool: 'source-map',

    // Create also a 'lib' chunk with common libraries, e.g. react.
    entry: _.assign(discoverBrowserMains(), {
        lib: ['react']
    }),

    output: {
        path: './build/public/js',
        publicPath: '/public/js/',
        filename: '[name].js'
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production') // This has effect on the react lib size
            }
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.CommonsChunkPlugin('lib', 'lib.js'),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],

    resolve: {
        extensions: ['', '.js', '.jsx', '.json', '.css']
    },

    module: {
        loaders: [
            { test: /\.json$/, loaders: ['json'] },
            { test: /\.(js|jsx|es)$/, exclude: /node_modules/, loader: 'babel' },
            { test: /\.css$/, loader: 'empty' },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file?name=[name].[ext]',
                    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            }
        ]
    },
    externals: {}
};

function discoverBrowserMains() {
    const browserMains = {};
    glob.sync('./browser-mains/*.js').forEach(filepath => {
        browserMains[path.basename(filepath, '.js')] = filepath;
    });
    return browserMains;
}