Stratasan Confident Asset Deployments, Pt2: Bundler

bundle.js

var webpack                 = require('webpack');
var path                    = require('path');
var BundleTracker           = require('webpack-bundle-tracker');
var autoprefixer            = require('autoprefixer');
var ExtractTextPlugin       = require("extract-text-webpack-plugin");
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
var BrowserSyncPlugin       = require('browser-sync-webpack-plugin');
var SvgStore                = require('webpack-svgstore-plugin');

const environment = process.env.NODE_ENV;
const args        = require('minimist')(process.argv.slice(2));
const bundleName  = args.config;
const watch       = args.watch;

if (! bundleName || bundleName === true) {
  throw new Error('You must specify a config file e.g. "pathways"');
}

/**
 * Require the correct config file.
 *
 * @type {Function}
 */
const configFile = require('./config/' + bundleName + '.webpack.config.js');

/**
 * Get the static URL dependeing on the specified environment.
 *
 * @return {String} Static asset URL.
 */
const getStaticUrl = () => {
  switch (environment) {
    case 'dev':
      return '/static/bundles';
    case 'staging':
      return '//stratassets-test.s3.amazonaws.com/static/bundles';
    case 'production':
      return '//stratassets.s3.amazonaws.com/static/bundles';
    default:
      return null;
  }
};

/**
 * Set up our basic options for use in any webpack config.
 *
 * @type {Object}
 */
var options = {
  destPath: path.join(__dirname, '../health/static/bundles'),
  postcss:  [ autoprefixer({ browsers: ['last 2 versions', 'ie >= 8'] }) ],
  styleLoaders: ExtractTextPlugin.extract('style-loader', 'css!postcss!sass'),
  plugins:  [
    new webpack.DefinePlugin({ 'global.GENTLY': false }),
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
    }),
    new SvgStore(path.join(__dirname, '../health/assets/img/*.svg'), 'svg', {
      name: 'sprite.svg',
      chunk: bundleName,
      baseUrl: getStaticUrl(),
      nodir: true
    })
  ],
  publicPath: getStaticUrl()
};

/**
 * Depending on the environment we're in,
 * set the appropriate extra options.
 */
if (environment === 'dev') {
  options = Object.assign(options, {
    jsFilename:   '[name].js',
    cssFilename:  '[name].css',
    plugins:      options.plugins.concat([
      new BrowserSyncPlugin({
        host: 'localhost',
        port: 1337,
        proxy: 'http://localhost:8000',
        open: false
      }),
      new ExtractTextPlugin('[name].css'),
      new BundleTracker({
        path: __dirname,
        filename: '../health/static/webpack-stats-' + bundleName + '.dev.json'
      }),
      new webpack.DefinePlugin({ DEBUG: true })
    ])
  });
} else {
  options = Object.assign(options, {
    jsFilename:  '[name]-[hash].js',
    cssFilename: '[name]-[hash].css',
    plugins:      options.plugins.concat([
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({ minimize: true }),
      new ExtractTextPlugin('[name]-[hash].css'),
      new OptimizeCssAssetsPlugin({
        cssProcessorOptions: { zindex: false }
      }),
      new BundleTracker({
        path: __dirname,
        filename: '../health/static/webpack-stats-' + bundleName + '.prod.json'
      }),
      new webpack.DefinePlugin({
        DEBUG: false,
        'process.env': {
          NODE_ENV: JSON.stringify('production')
        }
      })
    ])
  });
}

/**
 * Fetch the specified config file by passing it the current environment and options.
 *
 * @type {Object}
 */
const webpackConfig = configFile(options);

/**
 * Create our webpack compiler
 *
 * @type {Webpack}
 */
const compiler = webpack(webpackConfig);

/**
 * Run the compiler, specific to the environment we're in.
 */
if (environment === 'dev' && watch !== false) {
  compiler.watch({}, error => {
    if (error) console.log(error);
  });
} else {
  compiler.run(error => {
    if (error) console.log(error);

    console.log('Done bundling ' + bundleName + ' files.');
  })
}