webpack.config.js

/**
 * Dependencies
 */
var webpack = require('webpack');

/**
 * Import hash output plugin
 */
var OutputHashAsModulePlugin = require('./webpack-output-hash-as-module-plugin');

/**
 * Environment
 */
var isProduction = process.env.NODE_ENV === 'production';
var port = process.env.PORT || 3000;

/**
 * Plugins
 */
var plugins = [
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    '__DEVELOPMENT__': JSON.stringify(!isProduction)
  }),
  new webpack.IgnorePlugin(new RegExp('node-sass'))
];

/**
 * Add hot module replacement
 * when developing
 */
if (!isProduction) {
  plugins.push(new webpack.HotModuleReplacementPlugin());
  plugins.push(new webpack.NoEmitOnErrorsPlugin());
}

/**
 * Do code de-duping and minification
 * when running production mode
 */
if (isProduction) {
  plugins.push(new OutputHashAsModulePlugin({ file: 'bundle-hash.js' }));
	if (!process.env.DISABLE_JS_UGLIFY) {
		plugins.push(new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, }, sourceMap: true, }));
  }
}

/**
 * Entry points
 */
var entry = ['./src/client-bootstrap'];

/**
 * Add required entry points
 * when using hot module replacement
 * and webpack-dev-server
 */
if (!isProduction) {
  entry.unshift('webpack/hot/only-dev-server');
  entry.unshift('webpack-dev-server/client?http://localhost:' + port);
}

/**
 * Config
 *
 * TODO: Make the parts of the config that should be
 * customizable properties that you can inject into
 * a constructor function (entry, output.path, output.publicPath, etc...)
 */
module.exports = {
  /**
   * Use source maps for better debugging
   * http://cheng.logdown.com/posts/2016/03/25/679045
   */
  devtool: isProduction ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',

  /**
   * Add our entry file(s)
   */
  entry: entry,

  /**
   * Bundle output settings
   *
   * Production: Use the hash to tag the output bundles
   * Development: No hashing (as we refer to just "app.js" in /public/static/index.html)
   */
  output: isProduction ? {
    path: './public/static/',
    publicPath: '/static/',
    filename: 'app.[hash].js',
    chunkFilename: '[id].app.[chunkHash].js'
  } : {
    path: './public/static/',
    publicPath: '/static/',
    filename: 'app.js',
    chunkFilename: '[id].app.js'
  },

  /**
   * Add out plugins to the config
   */
  plugins: plugins,

  /**
   * Module loaders for resolving
   * the different file extensions
   * using loaders
   */
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: !isProduction ? [
        {
          loader: 'react-hot-loader',
        }, {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            presets: [
              // ['es2015', {modules: false}],
              'es2015',
              'stage-0',
              'react',
            ],
            plugins: [
              // All these plugins transform dynamic import with async/await
              'syntax-async-functions',
              'syntax-dynamic-import',
              'transform-async-to-generator',
              'transform-regenerator',
              'transform-runtime',

              // Now for some other plugins
              'transform-flow-strip-types',
              'styled-components',
            ],
          }
        },
      ] : [
        {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            presets: [
              //['es2015', {modules: false}],
              'es2015',
              'stage-0',
              'react',
            ],
            plugins: [
              // All these plugins transform dynamic import with async/await
              'syntax-async-functions',
              'syntax-dynamic-import',
              'transform-async-to-generator',
              'transform-regenerator',
              'transform-runtime',

              // Now for some other plugins
              'transform-flow-strip-types',
              'styled-components',
            ],
          }
        }
      ],
    }, {
      test: /\.scss$/,
      use: !isProduction ? [
        {
          loader: 'style-loader',
        }, {
          loader: 'css-loader',
          options: {
            minimize: true,
            autoprefixer: true,
          },
        }, {
          loader: 'postcss-loader',
        }, {
          loader: 'sass-loader'
        },
      ] : [
        {
          loader: 'css-loader',
          options: {
            minimize: true,
            autoprefixer: false,
          },
        }, {
          loader: 'postcss-loader',
        }, {
          loader: 'sass-loader',
        },
      ]
    }]
  },

  /**
   * Add resolver aliases that
   * we want to ignore in our
   * webpack bundle
   *
   * NOTE: We just replace any
   * server specific modules
   * with a no-op (from npm)
   */
  resolve: {
    alias: {
      'node-sass': 'no-op'
    }
  },

  /**
   * Add node built-ins requires that should
   * be ignored when creating
   * the webpack bundle (since these are server-only)
   */
  node: {
    'fs': 'empty',
    'node-sass': 'empty'
  }
};