webpack-dev-server-proxy

import {join} from 'path';
import webpack from 'webpack';
import {merge} from 'lodash';
import WebpackDevServer from 'webpack-dev-server';
import makeConfig from './make-config';

export default function(gulp, plugins, config) {
  var {ENV, site, port} = config;
  var {gutil, browserSync} = plugins;
  const isDev = ENV === 'DEV';
  let {PluginError} = gutil;

  return (cb) => {
    let task = gulp.currentTask.name.split(':').splice(-1)[0];
    var webpackConfig = makeConfig(merge({}, config, {
      task,
      port
    }));
    const compiler = webpack(webpackConfig);

    compiler.plugin('compile', () => {
      gutil.log(`Webpack Bundling ${task}...`);
    });

    compiler.plugin('done', (stats) => {
      let bs = browserSync.get('cms-assets-server');
      gutil.log(`Webpack Bundled in ${stats.endTime - stats.startTime}ms`);

      if (stats.compilation.errors && stats.compilation.errors.length) {
        stats.compilation.errors.forEach((err) => gutil.log(err.message));
        if(ENV !== 'DEV') {
          process.exit(1);
        }
      }

      //avoid multiple calls of gulp callback
      if(cb) {
        let gulpCb = cb;
        cb = null;

        if(isDev && task === 'body-scripts') {
          gutil.log(`[webpack-dev-server] listening on ${port}`);
        }

        gulpCb();
      } else if (task !== 'body-scripts') {
        bs && bs.reload();
      }

    });

    const logger = (err, stats) => {
      if(err) {
        throw new new gutil.PluginError({
          plugin: `[webpack: ${task}]`,
          message: err.message
        });
      }

      if(!isDev) {
        gutil.log(stats.toString());
      }
    };

    if(ENV === 'DEV') {
      /**
       * If we are not developing the `cms` site or if it is a head-script compile without the webpack dev server
       */
      if( (site && site !== 'cms') || task === 'head-scripts' ) {
        compiler.watch({
          aggregateTimeout: 1000,
          poll: true
        }, logger);
      } else if (task === 'body-scripts') {
        new WebpackDevServer(compiler, {
          publicPath: webpackConfig.output.publicPath,
          hot: true,
          quiet: true,
          noInfo: true,
          proxy: [
            {
              path: /^(?!\/static\/js\/(cms|events|donate-widget|homepage))(.*)$/,
              target: 'http://site.local.thegroundwork.com:8000'
            }
          ],
          watchOptions: {
            aggregateTimeout: 300,
            poll: 1000
          },
          headers: { 'X-Custom-Header': 'yes' },
          stats: { colors: true }
        }).listen(port, 'localhost', () => {});
      }
    } else {
      compiler.run(logger);
    }
  };
}