webpack.js

/**
 * Require Browsersync along with webpack and middleware for it
 */
var browserSync = require('browser-sync');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');

/**
 * Require ./webpack.config.js and make a bundler from it
 */
var webpackConfig = require('./webpack.config');
var compiler = webpack(webpackConfig);

/**
 * Run Browsersync and use middleware for Hot Module Replacement
 */
browserSync({
    proxy: {
      target: 'http://127.0.0.1:4040',
      middleware: [
        webpackDevMiddleware(compiler, {
          reload: true,
          // IMPORTANT: dev middleware can't access config, so we should
          // provide publicPath by ourselves
          publicPath: webpackConfig.output.publicPath,
          // contentBase: webpackConfig.output.publicPath,
          // pretty colored output
          stats: { colors: true }
          // for other settings see
          // http://webpack.github.io/docs/webpack-dev-middleware.html
        }),
        // bundler should be the same as above
        webpackHotMiddleware(compiler)
      ]
    },
    ghostMode: {
      clicks: true,
      forms: true,
      scroll: true
    },
    // no need to watch '*.js' here, webpack will take care of it for us,
    // including full page reloads if HMR won't work
    files: ['idontexist.css']
});