Summary

When we put everything together, our complete webpack.config.js file looks something like this:

"use strict";

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const basePlugins = [
  new webpack.optimize.CommonsChunkPlugin("vendor", "[name].[hash].bundle.js"),

  new HtmlWebpackPlugin({
    template: "./src/index.html",
    inject: "body",
    minify: false
  })
];

const envPlugins = {
  production: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ],
  development: []
};

const plugins = basePlugins.concat(envPlugins[process.env.NODE_ENV] || []);

module.exports = {
  entry: {
    app: "./src/index.ts",
    vendor: [
      "@angular/core",
      "@angular/compiler",
      "@angular/common",
      "@angular/http",
      "@angular/platform-browser",
      "@angular/platform-browser-dynamic",
      "@angular/router",
      "es6-shim",
      "reflect-metadata",
      "ng2-redux",
      "zone.js"
    ]
  },

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[hash].js",
    publicPath: "/",
    sourceMapFilename: "[name].[hash].js.map"
  },

  devtool: "source-map",

  resolve: {
    extensions: [".webpack.js", ".web.js", ".ts", ".js"]
  },

  plugins: plugins,

  module: {
    rules: [
      { test: /\.ts$/, loader: "ts", exclude: /node_modules/ },
      { test: /\.html$/, loader: "raw" },
      { test: /\.css$/, loader: "style!css?sourceMap" },
      { test: /\.svg/, loader: "url" },
      { test: /\.eot/, loader: "url" },
      { test: /\.woff/, loader: "url" },
      { test: /\.woff2/, loader: "url" },
      { test: /\.ttf/, loader: "url" }
    ],
    noParse: [/zone\.js\/dist\/.+/, /angular2\/bundles\/.+/]
  }
};

Going Further

Webpack also does things like hot code reloading and code optimization which we haven't covered. For more information you can check out the official documentation. The source is also available on Github.