Webpack 2 + Typescript + React (Lite)

package.json

{
  "name": "YOUR NAME",
  "version": "1.0.0",
  "description": "Boilerplate",
  "main": "index.js",
  "scripts": {
    "start": "./node_modules/webpack-dashboard/bin/webpack-dashboard.js -t 'React-Redux Boilerplate' -- ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "build": "rm -rf ./build && NODE_ENV=\"production\" ./node_modules/webpack/bin/webpack.js",
    "preview": "NODE_ENV=\"production\" ./node_modules/webpack-dashboard/bin/webpack-dashboard.js -t 'Preview Mode - React-Redux Boilerplate' -- ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
  },
  "keywords": [
    "React",
    "ES2016",
    "typescript"
  ],
  "author": "John Reilly",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/microsoft/typescriptsamples/issues"
  },
  "homepage": "https://github.com/Microsoft/TypeScriptSamples/tree/master/es6-babel-react-flux-karma#readme",
  "devDependencies": {
    "@types/react": "^0.14.41",
    "@types/react-addons-test-utils": "^0.14.15",
    "@types/react-dom": "^0.14.18",
    "typescript": "^2.1.4",
    "webpack": "^2.2.0-rc.3",
    "awesome-typescript-loader": "^3.0.0-beta.17",
    "extract-text-webpack-plugin": "^2.0.0-beta",
    "html-webpack-plugin": "^2.26.0",
    "webpack-dashboard": "^0.2.1",
  },
  "dependencies": {
    "react-hot-loader": "3.0.0-beta.2",
    "react-lite": "^0.15.30",
    "source-map-loader": "^0.1.5",
    "webpack-dev-server": "v2.2.0-rc.0"
  }
}

tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "lib": [
            "dom",
            "es2015",
            "es2016"
        ],
        "jsx": "react",
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "removeComments": false,
        "preserveConstEnums": true,
        "sourceMap": true,
        "skipLibCheck": true
    }
}

webpack.config.js

const webpack = require('webpack');
const path = require('path');

const DashboardPlugin = require('webpack-dashboard/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const nodeEnv = process.env.NODE_ENV || 'development';
const isProduction = nodeEnv === 'production';

const jsSourcePath = path.join(__dirname, './src');
const buildPath = path.join(__dirname, './build');
const imgPath = path.join(__dirname, './static');
const sourcePath = path.join(__dirname, './src');

// Common plugins
const plugins = [
  new webpack.optimize.CommonsChunkPlugin({
    names: 'vendor',
    filename: 'vendor-[hash].js',
    minChunks: function minChunks(module, count) {
      return module.resource && module.resource.indexOf('node_modules') !== -1;
    }
  }),
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(nodeEnv),
    },
  }),
  new webpack.NamedModulesPlugin(),
  new HtmlWebpackPlugin({
    template: path.join(jsSourcePath, 'index.html'),
    path: buildPath,
    filename: 'index.html',
  }),
  new webpack.LoaderOptionsPlugin({
    options: {
      // tslint: {
      //   emitErrors: true,
      //   failOnHint: true
      // },
      context: sourcePath,
    },
  }),
  new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
  new webpack.optimize.MinChunkSizePlugin({
    minChunkSize: 1024
  })
];

// Common rules
const rules = [
  // {
  //   enforce: 'pre',
  //   test: /\.tsx?$/,
  //   loader: 'tslint',
  //   exclude: /(node_modules)/,
  // },
  { 
    enforce: 'pre',
    test: /\.js$/, 
    loader: "source-map-loader" 
  },
  {
    test: /\.(ts|tsx)$/,
    exclude: /node_modules/,
    loader: [
      'awesome-typescript-loader',
    ],
  },
  {
    test: /\.(png|gif|jpg|svg)$/,
    include: imgPath,
    use: 'url-loader?limit=20480&name=assets/[name]-[hash].[ext]',
  },
];

if (isProduction) {
  // Production plugins
  plugins.push(
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false,
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        screw_ie8: true,
        conditionals: true,
        unused: true,
        comparisons: true,
        sequences: true,
        dead_code: true,
        evaluate: true,
        if_return: true,
        join_vars: true,
      },
      output: {
        comments: false,
      },
    }),
    new ExtractTextPlugin('style-[hash].css')
  );
} else {
  // Development plugins
  plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new DashboardPlugin()
  );
}

module.exports = {
  devtool: isProduction ? 'eval' : 'source-map',
  // context: jsSourcePath,
  entry: {
    js: [
      'react-hot-loader/patch',
      'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
      'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
      path.join(jsSourcePath, 'index.tsx'),
    ]
  },
  output: {
    path: buildPath,
    publicPath: '/',
    filename: 'app-[hash].js',
  },
  module: {
    rules,
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    alias: {
      'react': 'react-lite',
      'react-dom': 'react-lite'
    }
  },
  plugins,
  devServer: {
    contentBase: isProduction ? './build' : './src',
    historyApiFallback: true,
    port: 3000,
    compress: isProduction,
    inline: !isProduction,
    hot: !isProduction,
    host: '0.0.0.0',
    stats: {
      assets: true,
      children: false,
      chunks: false,
      hash: false,
      modules: false,
      publicPath: false,
      timings: true,
      version: false,
      warnings: true,
      colors: {
        green: '\u001b[32m',
      },
    },
  },
};