Webpack 2 config for Angular2 with AOT and Production settings

webpack.config.ts

/* tslint:disable: variable-name max-line-length */
import 'ts-helpers';

const {
  HotModuleReplacementPlugin,
  DefinePlugin,
  ProgressPlugin,
  NoErrorsPlugin,
  optimize: {
    CommonsChunkPlugin
  }
} = require('webpack');
const {ForkCheckerPlugin} = require('awesome-typescript-loader');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
const CompressionPlugin = require('compression-webpack-plugin');
const path = require('path');

function root(__path = '.') {
  return path.join(__dirname, __path);
}

const ENV = process.env.npm_lifecycle_event;
const AOT = ENV === 'build:aot' || ENV === 'server:aot';
const isProd = ENV === 'build:prod' || ENV === 'server:prod' || ENV === 'watch:prod' ||  ENV === 'build:aot';

// type definition for WebpackConfig at the bottom
module.exports = function webpackConfig(): WebpackConfig {

  const CONSTANTS = {
    ENV: isProd ? JSON.stringify('production') : JSON.stringify('development'),
    PORT: 3000,
    HOST: 'localhost'
  };

  let config: WebpackConfig = Object.assign({});

  config.cache = true;
  isProd ? config.devtool = 'source-map' : config.devtool = 'eval';

  if (AOT) {
    config.entry = {
      polyfills: './src/polyfills.browser',
      main: './src/main.browser.aot'
    };
  } else {
    config.entry = {
      polyfills: './src/polyfills.browser',
      main: './src/main.browser'
    };
  }

  config.output = {
    path: root('dist'),
    filename: isProd ? '[name].[hash].bundle.js' : '[name].bundle.js',
    sourceMapFilename: isProd ? '[name].[hash].map' : '[name].map',
    chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js'
  };

  config.module = {
    preLoaders: [
      {
        test: /\.js$/,
        loader: 'source-map-loader',
        exclude: [
          // these packages have problems with their sourcemaps
          root('node_modules/rxjs'),
          root('node_modules/@angular')
        ]
      },
    ],

    loaders: [
      {
        test: /\.ts$/,
        loaders: [
          'awesome-typescript-loader',
          'angular2-template-loader'
        ],
        exclude: [/\.(spec|e2e|d)\.ts$/]
      },
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.html/, loader: 'raw-loader', exclude: [root('src/index.html')] },
      { test: /\.css$/, loader: 'raw-loader' },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
      },
    ]
  };

  config.plugins = [
    new HotModuleReplacementPlugin(),
    new ProgressPlugin(),
    new ForkCheckerPlugin(),
    new CommonsChunkPlugin({ name: ['main', 'polyfills'], minChunks: Infinity }),
    new DefinePlugin(CONSTANTS),
    new NamedModulesPlugin(),
    new CopyWebpackPlugin([{
      from: 'src/assets',
      to: 'assets'
    }]),
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ];

  // Add build specific plugins
  console.log('PRODUCTION BUILD = ', isProd);
  if (isProd) {
    config.plugins.push(
      // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
      // Only emit files when there are no errors
      new NoErrorsPlugin(),

      // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
      // Minify all javascript, switch loaders to minimizing mode
      new UglifyJsPlugin({
        beautify: false,
        comments: false
      })
    );
    config.resolve = {
      extensions: ['.ts', '.js'],
      root: root('src'),
      moduleDirectories: ['node_modules'],
      mainFields: ['module', 'main', 'browser']
    };
  } else {
    config.resolve = {
      extensions: ['.ts', '.js'],
      root: root('src'),
      moduleDirectories: ['node_modules']
    };
  }

  config.devServer = {
    contentBase: './src',
    port: CONSTANTS.PORT,
    historyApiFallback: true
  };

  config.node = {
    global: 'window',
    process: true,
    Buffer: false,
    crypto: 'empty',
    module: false,
    clearImmediate: false,
    setImmediate: false,
    clearTimeout: true,
    setTimeout: true
  };

  return config;

} ();

// Types
interface WebpackConfig {
    cache?: boolean;
    target?: string;
    devtool?: string;
    entry: any;
    output: any;
    module?: any;
    plugins?: Array<any>;
    resolve?: {
      root?: string;
      extensions?: Array<string>;
      moduleDirectories?: Array<string>;
      mainFields?: Array<string>;
    };
    devServer?: {
      contentBase?: string;
      port?: number;
      historyApiFallback?: boolean;
      hot?: boolean;
      inline?: boolean;
    };
    node?: {
      process?: boolean;
      global?: boolean | string;
      Buffer?: boolean;
      crypto?: string | boolean;
      module?: boolean;
      clearImmediate?: boolean;
      setImmediate?: boolean
      clearTimeout?: boolean;
      setTimeout?: boolean
    };
}

z - package.json

 "scripts": {
    "rimraf": "rimraf",
    "tslint": "tslint",
    "lint": "npm run tslint 'src/app/**/*.ts'",
    "clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage dist",
    "clean:dist": "npm run rimraf -- dist",
    "clean:compile": "npm run rimraf -- output compiled src/compiled",
    "compile": "npm run compile:aot",
    "compile:aot": "npm run sass && npm run clean:compile && ./node_modules/.bin/ngc -p src && npm run build:aot",
    "compile:only": "npm run clean:compile && npm run sass && ./node_modules/.bin/ngc -p src",
    "compile:prod": "npm run sass && npm run clean:compile && ./node_modules/.bin/ngc -p src && npm run build:prod",
    "compile:watch": "watch-run -i npm run compile:only -p 'src/app/**/*.ts, src/app/**/*.scss' npm run compile:only",
    "prodserver": "node prodserver",
    "sass": "node-sass src -o src",
    "sass:watch": "node-sass -w src -o src",
    "start": "npm run server:dev",
    "server:aot": " webpack-dev-server & npm run sass:watch",
    "server:dev": " webpack-dev-server & npm run sass:watch",
    "server:prod": "npm run watch:prod & npm run prodserver",
    "prebuild": "rm -rf dist && npm run sass",
    "debug:build": "node-nightly --inspect --debug-brk node_modules/webpack/bin/webpack.js",
    "build": "npm run build:prod",
    "build:aot": "webpack",
    "build:dev": "webpack",
    "build:prod": "webpack",
    "watch": "npm run watch:dev",
    "watch:dev": "npm run build:dev -- --watch & npm run sass:watch",
    "watch:prod": "npm run build:prod -- --watch & npm run sass:watch"
  }

z - prodserver.js

var compression = require('compression')
var express = require('express'),
path = require('path');

var app = express();
var ROOT = path.join(path.resolve(__dirname, '..'));

app.use(compression())
app.use(express.static('dist'));

var renderIndex = (req, res) => {
    res.sendFile(path.resolve(__dirname, 'dist/index.html'));
}

app.get('/*', renderIndex);

app.listen(8080, () => {
  console.log('Listening on: http://localhost:8080');
});