webpack.common.js

// shared config (dev and prod)
const webpack       = require('webpack');
const {resolve}       = require('path');
const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
const HappyPack = require('happypack');

const nodeEnv = process.env.NODE_ENV || 'development';
var envConfig;
try {
  const json = require(`../environments/${nodeEnv}.json`);
  envConfig = Object.keys(json).reduce((res, k) => {res[k] = JSON.stringify(json[k]); return res; }, {});
} catch (error) {
  console.error(`configs/environments/${nodeEnv}.json does not exist. Check your NODE_ENV`);
  throw error;
}

module.exports = {
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
      '~': resolve(__dirname, '../../src')
    },
  },
  context: resolve(__dirname, '../../src'),
  module: {
    rules: [
      {
        test: require.resolve('react'),
        use: {
          loader: 'imports-loader',
          options: {
            shim: 'es5-shim/es5-shim',
            sham: 'es5-shim/es5-sham',
          },
        },
      },
      {
        test: /\.jsx?$/,
        use: ['babel-loader', 'source-map-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'happypack/loader?id=ts'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', ],
      },
      {
        test: /\.scss$/,
        loaders: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'],
      },
      {
        test: /\.(jpe?g|png|gif)$/i,
        loaders: [
          'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
        ],
      },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default'],
      Tether: 'tether',
    }),
    new HappyPack({
      id: 'ts',
      threads: 2,
      loaders: [
        {
          path: 'ts-loader',
          query: { happyPackMode: true }
        }
      ]
    }),
    new webpack.DefinePlugin(envConfig),
    new webpack.ProgressPlugin({ profile: false }),
    new WebpackBuildNotifierPlugin({
      suppressSuccess: false
    })
  ],
  performance: {
    hints: false,
  },
};

webpack.dev.js

// development config
const merge        = require('webpack-merge');
const webpack      = require('webpack');
const {resolve}    = require('path');
const commonConfig = require('./webpack.common');
const outputPath   = resolve(__dirname, '../../public');
const publicPath   = '/';

module.exports = merge(commonConfig, {
  entry: [
    'react-hot-loader/patch', // activate HMR for React
    'webpack-dev-server/client?http://localhost:8080', // bundle the client for webpack-dev-server and connect to the provided endpoint
    'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
    'es5-shim/es5-shim',
    'es5-shim/es5-sham',
    'babel-polyfill',
    './index.tsx' // the entry point of our app
  ],
  output: {
    filename: 'bundle.js',
    path: outputPath,
    publicPath: publicPath // necessary for HMR to know where to load the hot update chunks
  },
  devServer: {
    hot: true, // enable HMR on the server
    contentBase: outputPath,
    publicPath: publicPath,
    historyApiFallback: {
      index: 'index.html'
    }
  },
  devtool: 'cheap-module-eval-source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // enable HMR globally
    new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates
  ],
});