webpack.config.js

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'),
  profile: path.join(__dirname, '.build_cache', 'app', 'profile.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;
    }, {
      // 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'
      )
    });
}

// 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/campaign_base.html'),
    template:      path.join(__dirname, 'templates/campaign_base.webpack.template.ejs'),
    inject:        false,
    excludeChunks: ['manifest'],
    hash:          false,
    cache:         true,
    showErrors:    false
  }),
  new HtmlWebpackPlugin({
    filename:      path.join(__dirname, 'templates/profile_base.html'),
    template:      path.join(__dirname, 'templates/profile_base.ejs'),
    inject:        false,
    excludeChunks: ['manifest'],
    hash:          false,
    cache:         true,
    showErrors:    false
  })
];

if(buildType !== 'development'){
}

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: paths.entry,
    profile: paths.profile
  },
  output:  {
    path:          paths.out,
    publicPath:    '/events/build/js',
    filename:      "[name].js",
    chunkFilename: ".js"
  },
  // resolve: {
  //   extensions: ['.js'],
  //   alias:      {
  //     'react':     'inferno-compat',
  //     'react-dom': 'inferno-compat'
  //   }
  // },
  plugins: plugins,
  module:  {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use:  [
          'babel-loader'
        ],
      }
    ]
  },
  target:  'web',
  node:    {
    fs:         'empty',
    __filename: false,
    __dirname:  false
  }
};