webpack.config.js

/*
 * TypeScript runs separately, not through loader, and outputs compiled files to
 *    .build_cache
 */


var path                        = require('path')
var webpack                     = require('webpack')
var HtmlWebpackPlugin           = require('html-webpack-plugin')
var InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
// var BabiliPlugin                = require('babili-webpack-plugin');

var paths = {
  src:     path.join(__dirname, '.build_cache'),
  entry:   path.join(__dirname, '.build_cache', 'app', 'index.js'),
  out:     path.join(__dirname, 'build', 'js')
}

var buildType = process.env.NODE_ENV ? process.env.NODE_ENV : 'production'

// just in case we pass in NODE_DEV = dev
if(/^dev/.test(buildType)) {
  buildType = 'development'
}

function getClientEnvironment() {
  var REACT_APP = /^REACT_APP_/i

  return Object
    .keys(process.env)
    .filter(function(key) {
      return REACT_APP.test(key)
    })
    .reduce(function(env, key) {
      env['process.env.' + key] = JSON.stringify(process.env[key])
      return env
    }, {
      // whenever found in code, process.env.NODE_ENV is replaced with
      // the actual value of process.env.NODE_ENV
      // Useful for determining whether we’re running in production mode.
      // Most importantly, it switches React into the correct mode.
      'process.env.NODE_ENV': JSON.stringify(
        process.env.NODE_ENV || 'development'
      )
    })
}

// DefinePlugin with getClientEnvironment
// makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }.
// UglifyJS will remove dead code pased on values of NODE_ENV in code etc.
// This will also make sure that we include production
// or development versions of react etc.
plugins = [
  new webpack.DefinePlugin(getClientEnvironment()),
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  // new WebpackMd5Hash(),
  new webpack.optimize.CommonsChunkPlugin({
    name:      'lib',
    minChunks: function(module) {
      return module.context && module.context.indexOf('node_modules') !== -1
    }
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest'
  }),
  new InlineManifestWebpackPlugin({
    name: 'webpackManifest'
  }),
  new HtmlWebpackPlugin({
    filename:      path.join(__dirname, 'templates/index.html'),
    template:      path.join(__dirname, 'templates/index.ejs'),
    inject:        false,
    excludeChunks: ['manifest'],
    hash:          false,
    cache:         true,
    showErrors:    false
  })
]

if(buildType === 'production') {
  plugins.unshift(
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug:    false
    })
  )
  plugins.push(new webpack.optimize.AggressiveMergingPlugin())
  plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        screw_ie8:     true, // React doesn't support IE8
        warnings:      false,
        dead_code:     true,
        drop_debugger: true,
        conditionals:  true,
        comparisons:   true,
        booleans:      true,
        loops:         true,
        unused:        true,
        if_return:     true,
        drop_console:  true,
        unsafe:        true
      },
      mangle:   {
        screw_ie8: true
      },
      output:   {
        comments:  false,
        screw_ie8: true
      }
    })
  )
}

module.exports = {
  bail:    false,
  devtool: buildType !== 'production' ? 'source-map' : '',
  entry:   {
    app:     ['babel-polyfill', paths.entry]
  },
  output:  {
    path:          paths.out,
    publicPath:    '/assets/build/js',
    filename:      '[name].js',
    chunkFilename: '.js'
  },
  plugins: plugins,
  module:  {
    rules: [
      {
        test:    /\.(js|jsx)$/,
        exclude: /node_modules/,
        use:     [
          'babel-loader'
        ],
      }
    ]
  },
  target:  'web',
  node:    {
    fs:         'empty',
    __filename: false,
    __dirname:  false
  }
}