build config

package.json

{
  "private": true,
  "name": "web-app-boilerplate",
  "description": "Universal (isomorphic) Web App Boilerplate",
  "license": "MIT",
  "version": "0.0.0",
  "engines": {
    "node": ">=5.0.0"
  },
  "dependencies": {
    "babel-runtime": "6.2.0",
    "express": "4.13.3",
    "react": "0.14.3",
    "react-dom": "0.14.3",
    "source-map-support": "0.3.3"
  },
  "devDependencies": {
    "assets-webpack-plugin": "^3.2.0",
    "babel-cli": "^6.2.0",
    "babel-eslint": "^4.1.6",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-es2015-destructuring": "^6.1.18",
    "babel-plugin-transform-es2015-function-name": "^6.1.18",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.2.0",
    "babel-plugin-transform-es2015-parameters": "^6.1.18",
    "babel-plugin-transform-es2015-sticky-regex": "^6.1.18",
    "babel-plugin-transform-es2015-unicode-regex": "^6.1.18",
    "babel-plugin-transform-runtime": "^6.1.18",
    "babel-plugin-transform-strict-mode": "^6.2.0",
    "babel-polyfill": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "babel-preset-stage-0": "^6.1.18",
    "browser-sync": "^2.10.0",
    "del": "^2.1.0",
    "eslint": "^1.10.2",
    "eslint-config-airbnb": "^1.0.2",
    "eslint-plugin-react": "^3.10.0",
    "file-loader": "^0.8.5",
    "gaze": "^0.5.2",
    "jscs": "^2.6.0",
    "ncp": "^2.0.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.9",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.5.0"
  },
  "babel": {
    "presets": [
      "stage-0"
    ],
    "plugins": [
      "transform-es2015-destructuring",
      "transform-es2015-function-name",
      "transform-es2015-modules-commonjs",
      "transform-es2015-parameters",
      "transform-es2015-sticky-regex",
      "transform-es2015-unicode-regex",
      "transform-strict-mode"
    ]
  },
  "eslintConfig": {
    "parser": "babel-eslint",
    "extends": "airbnb",
    "globals": {
      "__DEV__": true,
      "__CLIENT__": true,
      "__SERVER__": true
    }
  },
  "jscsConfig": {
    "preset": "airbnb",
    "excludeFiles": [
      "build/**",
      "node_modules/**"
    ],
    "validateQuoteMarks": {
      "mark": "'",
      "escape": true,
      "ignoreJSX": true
    }
  },
  "scripts": {
    "lint": "eslint . --ignore-path .gitignore && jscs .",
    "build": "babel-node tools/run build",
    "bundle": "babel-node tools/run bundle",
    "clean": "babel-node tools/run clean",
    "copy": "babel-node tools/run copy",
    "serve": "babel-node tools/run serve",
    "start": "babel-node tools/run start"
  }
}

webpack.config.js

import webpack from 'webpack';
import AssetsPlugin from 'assets-webpack-plugin';
import path from 'path';
import packageJson from '../package.json';

const DEBUG = !process.argv.includes('--release');
const VERBOSE = process.argv.includes('--verbose');
const WATCH = global.WATCH;
const GLOBALS = {
  'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
  __DEV__: DEBUG,
  __CLIENT__: false,
  __SERVER__: false,
};

function addHash(template, hashType) {
  const hash = WATCH && hashType === 'chunkhash' ? 'hash' : hashType;
  return DEBUG ? `${template}?[${hash}]` : template.replace(/\.[^.]+$/, `.[${hash}]$&`);
}

// Base configuration
const config = {
  context: path.join(__dirname, '../'),

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader',
      }, {
        test: /\.txt$/,
        loader: 'raw-loader',
      }, {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: `url-loader?name=${addHash('[path][name].[ext]', 'hash')}&limit=4096`,
      }, {
        test: /\.(eot|ttf|wav|mp3)$/,
        loader: `file-loader?name=${addHash('[path][name].[ext]', 'hash')}`,
      },
    ],
  },

  resolve: {
    root: path.join(__dirname, '../'),
    modulesDirectories: ['node_modules'],
    extensions: ['', '.js'],
  },

  debug: DEBUG,

  stats: {
    colors: true,
    reasons: DEBUG,
    hash: VERBOSE,
    version: VERBOSE,
    timings: true,
    chunks: VERBOSE,
    chunkModules: VERBOSE,
    cached: VERBOSE,
    cachedAssets: VERBOSE,
  },
};

// Configuration for the client-side bundle (client.js)
const clientConfig = Object.assign({}, config, {
  entry: {
    vendor: [
      'babel-runtime/core-js',
      'babel-polyfill',
      'react',
      'react-dom',
    ],
    app: [
      ...WATCH ? ['webpack-hot-middleware/client'] : [],
      './client',
    ],
  },

  output: {
    path: path.join(__dirname, '../build/public/assets'),
    publicPath: '/assets/',
    filename: addHash('[name].js', 'chunkhash'),
    chunkFilename: addHash('[name].[id].js', 'chunkhash'),
    pathinfo: DEBUG,
  },

  module: {
    loaders: [
      ...config.module.loaders,
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: [
            'react',
            'es2015',
            'stage-0',
          ],
          plugins: [
            'transform-runtime',
            'transform-strict-mode',
          ],
        },
      },
    ],
  },

  target: 'web',

  plugins: [
    new webpack.DefinePlugin(Object.assign({}, GLOBALS, {
      __CLIENT__: true,
    })),

    new AssetsPlugin({
      path: path.join(__dirname, '../build'),
      filename: 'assets.json',
      prettyPrint: true,
    }),

    new webpack.optimize.OccurenceOrderPlugin(true),

    ...DEBUG ? [
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        filename: addHash('[name].js', 'chunkhash'),
        minChunks: Infinity,
      }),
    ] : [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: VERBOSE,
        },
      }),
      new webpack.optimize.AggressiveMergingPlugin(),
    ],

    ...WATCH ? [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
    ] : [],
  ],

  devtool: DEBUG ? 'source-map' : null,
});

// Configuration for the server-side bundle (server.js)
const serverConfig = Object.assign({}, config, {
  entry: {
    server: './server',
  },

  output: {
    path: path.join(__dirname, '../build'),
    filename: '[name].js',
    libraryTarget: 'commonjs2',
  },

  module: {
    loaders: [
      ...config.module.loaders,
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: [
            'react',
            'stage-0',
          ],
          plugins: [
            'transform-es2015-destructuring',
            'transform-es2015-function-name',
            'transform-es2015-modules-commonjs',
            'transform-es2015-parameters',
            'transform-es2015-sticky-regex',
            'transform-es2015-unicode-regex',
            'transform-runtime',
            'transform-strict-mode',
          ],
        },
      },
    ],
  },

  target: 'node',

  externals: [
    /^[@a-z][a-z\/\.\-0-9]*$/i,
    /^\.\/assets\.json$/,
  ],

  plugins: [
    new webpack.DefinePlugin(Object.assign({}, GLOBALS, {
      __SERVER__: true,
    })),

    new webpack.BannerPlugin('require("source-map-support").install();', {
      raw: true,
      entryOnly: false,
    }),

    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1,
    }),
  ],

  devtool: 'source-map',

  node: {
    console: false,
    global: false,
    process: false,
    Buffer: false,
    __filename: false,
    __dirname: false,
  },
});

export default [clientConfig, serverConfig];