watch.js

#!/usr/bin/env node

var BrowserSync = require("browser-sync")
var Webpack     = require('webpack')
var WebpackDev  = require("webpack-dev-middleware")
var WebpackHot  = require("webpack-hot-middleware")
var config      = require(__dirname + '/../config/webpack')
var port        = process.env.PORT || 3000
var spawn       = require('child_process').spawn

var location = require('url').format({
  hostname : 'localhost',
  port     : port,
  protocol : 'http'
})

config.entry.unshift(
  'webpack-hot-middleware/client?path' + location,
  'webpack/hot/only-dev-server'
)

config.module.loaders.unshift({
  exclude : /node_modules/,
  test    : /\.jsx?$/,
  loader  : 'react-hot'
})

config.plugins.push(
  // Occurence ensures consistent build hashes
  new Webpack.optimize.OccurenceOrderPlugin(),
  // Enables Hot Module Replatement
  new Webpack.HotModuleReplacementPlugin(),
  // handle errors more cleanly
  new Webpack.NoErrorsPlugin()
)

var compiler = Webpack(config)

BrowserSync({
  notify: false,
  open: false,
  port: port,

  watchOptions: {
    ignored: /([\/\\]\.|\.map)/
  },

  files: [
    "./build/**/*",
    {
      match: [ "app/**/*" ],
      fn: function (event, file) {
        if (event === 'change') {
          console.log("%s changed", file)
          spawn('make', ['-j', '8', 'reload'], { stdio: 'inherit' })
        }
      }
    }
  ],

  server: {
    baseDir: config.output.path,
    middleware: [
      WebpackDev(compiler, { noInfo: true }),
      WebpackHot(compiler, { log: false })
    ]
  }
})