From 15ba6828f6d817f5046d0f804bc03687037ea455 Mon Sep 17 00:00:00 2001
From: Ken <kchau@microsoft.com>
Date: Fri, 15 Feb 2019 15:01:17 -0800
Subject: [PATCH] making build much much faster

---
 step2-02/src/components/TodoList.tsx |  2 +-
 webpack.config.js                    | 25 ++++++++++++++-----------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/step2-02/src/components/TodoList.tsx b/step2-02/src/components/TodoList.tsx
index 0b52f46..805bd8f 100644
--- a/step2-02/src/components/TodoList.tsx
+++ b/step2-02/src/components/TodoList.tsx
@@ -12,7 +12,7 @@ interface TodoListProps {
 }
 
 export const TodoList = (props: TodoListProps) => {
-  const { filter, todos, complete, remove, edit } = this.props;
+  const { filter, todos, complete, remove, edit } = props;
   const filteredTodos = Object.keys(todos).filter(id => {
     return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
   });
diff --git a/webpack.config.js b/webpack.config.js
index b58d591..f839b83 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
@@ -12,10 +14,9 @@ const entries = {
   playground: './playground/src/index'
 };
 
-module.exports = Object.keys(entries).map(entryPoint => {
-  const entryRequest = entries[entryPoint];
+module.exports = function() {
   return {
-    entry: { [entryPoint]: entryRequest },
+    entry: entries,
     module: {
       rules: [
         {
@@ -31,22 +32,24 @@ module.exports = Object.keys(entries).map(entryPoint => {
       ]
     },
     plugins: [
-      new HtmlWebpackPlugin({
-        template: path.join(__dirname, `${entryPoint}/index.html`),
-        filename: '../index.html'
+      ...Object.keys(entries).map(entry => {
+        return new HtmlWebpackPlugin({
+          template: path.join(__dirname, entry, 'index.html'),
+          filename: `${entry}/index.html`,
+          chunks: [entry]
+        });
       }),
       new ForkTsCheckerWebpackPlugin({
         silent: true,
-        async: false,
-        useTypescriptIncrementalApi: true
+        async: false
       })
     ],
     resolve: {
       extensions: ['.tsx', '.ts', '.js']
     },
     output: {
-      filename: '[name].js',
-      path: path.resolve(__dirname, entryPoint, 'dist')
+      filename: '[name]/dist/[name].js',
+      path: path.resolve(__dirname)
     },
     devServer: {
       contentBase: path.resolve(__dirname),
@@ -60,4 +63,4 @@ module.exports = Object.keys(entries).map(entryPoint => {
     mode: 'development',
     devtool: 'eval'
   };
-});
+};