gulp + webpack build process.

gulpfile.js

const gulp = require('gulp');
const browserSync = require('browser-sync');
const path = require('path');
const del = require('del');
const sass = require('gulp-sass');
const gutil = require('gulp-util');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const genWebpackConfig = require('./webpack.js');
const pdf = require('gulp-html-pdf');

const BUILD_DIR = '__build__';
const DIST_DIR = '__dist__';
const dependencies = Object.keys(require('./package.json').dependencies).filter((d) => {
  return d.indexOf('.css') === -1; // Do not include css dependencies
});

const production = process.env.NODE_ENV === 'production';

gulp.task('dev', ['default'], () => {
  const config = genWebpackConfig({ production: production, vendors: dependencies });
  const bundler = webpack(config);
  browserSync.init({
    open: false,
    server: {
      baseDir: BUILD_DIR,
      middleware: [
        webpackDevMiddleware(bundler, {
          publicPath: '/' + config.output.publicPath,
        }),
        webpackHotMiddleware(bundler),
      ],
    },
  });

  gulp.watch('index.html', ['html-reload']);
  gulp.watch('scss/*.scss', ['sass']);
  gulp.watch('img/**/*', ['img']);
});

gulp.task('del', () => {
  return del.sync([
    BUILD_DIR,
    DIST_DIR,
  ]);
});

gulp.task('html', () => {
  return gulp.src('./index.html')
  .pipe(gulp.dest(BUILD_DIR));
});

gulp.task('html-reload', ['html'], () => {
  browserSync.reload();
});

gulp.task('sass', () => {
  return gulp.src('./scss/**/*.scss')
  .pipe(sass({
    includePaths: [path.join(__dirname, 'node_modules')],
  }).on('error', sass.logError))
  .pipe(gulp.dest(BUILD_DIR))
  .pipe(browserSync.stream());
});

gulp.task('img', () => {
  return gulp.src('./img/**/*')
  .pipe(gulp.dest(path.join(BUILD_DIR, 'img')));
});

gulp.task('scripts', (cb) => {
  const config = genWebpackConfig({ production: production, vendors: dependencies });
  webpack(config, (err, o) => {
    console.log(o);
    if (err) throw new gutil.PluginError('webpack', err);
    cb();
  });
});

gulp.task('build', ['del', 'html', 'scripts', 'img', 'sass']);

gulp.task('package', ['build'], () => {
  return gulp.src(path.join(BUILD_DIR, 'index.html'))
  .pipe(gulp.dest(DIST_DIR));
});

gulp.task('default', ['build']);

webpack.js

const webpack = require('webpack');
const path = require('path');

module.exports = function webpackConfig(options, envs) {
  const production = options.production || false;
  const config = {
    entry: (() => {
      const entry = {};
      entry.vendors = options.vendors || [];
      entry.app = [path.join(__dirname, 'js', 'index.js')];
      entry.app = !production ? entry.app.concat(['webpack-hot-middleware/client']) : entry.app;
      return entry;
    })(),
    resolve: {
      extensions: ['', '.js', '.jsx'],
      root: path.join(__dirname, 'js'),
      modulesDirectories: [path.join(__dirname, 'node_modules'), path.join(__dirname, 'data')],
    },
    output: {
      path: path.join(__dirname, '__build__'),
      filename: '[name].js',
      publicPath: options.CDN || '',
    },
    stats: {
      colors: true,
      reasons: !production,
    },
    debug: !production,
    devtool: !production ? 'eval-cheap-module-source-map' : false,
    module: {
      loaders: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          loader: 'babel',
          query: {
            presets: ['stage-0', 'es2015', 'react'],
          },
        },
        {
          test: /\.json$/,
          loader: 'json',
        },
      ],
    },
    plugins: (() => {
      const p = [];

      if (production) {
        p.push(new webpack.optimize.OccurenceOrderPlugin());
        p.push(new webpack.optimize.UglifyJsPlugin({
          compressor: {
            warnings: false,
            screw_ie8: true,
          },
        }));
        p.push(new webpack.optimize.DedupePlugin());
      }

      if (!production) {
        p.push(new webpack.HotModuleReplacementPlugin());
        p.push(new webpack.NoErrorsPlugin());
      }

      p.push(new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'));
      p.push(new webpack.ProvidePlugin({
        'Promise': 'exports?global.Promise!es6-promise',
        'fetch': 'exports?self.fetch!whatwg-fetch',
      }));

      p.push(new webpack.DefinePlugin(envs ? {
        'process.env.API_SERVER': JSON.stringify(envs.API_SERVER || process.env.API_SERVER),
        'process.env.NODE_ENV': JSON.stringify(envs.NODE_ENV || process.env.NODE_ENV),
        'process.env.VERSION': JSON.stringify(envs.VERSION || process.env.VERSION),
      } : {}));
      return p;
    })(),
  };
  return config;
};