From 9249f562234663db58364cead2952c4f077cf9a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Ole=C5=9B?= <piotrek.oles@gmail.com>
Date: Thu, 11 May 2017 21:55:50 +0200
Subject: [PATCH] Add fork-ts-checker-webpack-plugin info and examples (#540)

* Add fork-ts-checker-webpack-plugin info and examples

* Self CR
---
 README.md                                     | 13 ++++++++
 .../webpack2-fork-ts-checker/package.json     | 14 ++++++++
 .../src/fileWithError.ts                      |  4 +++
 .../src/fileWithoutError.ts                   |  4 +++
 .../webpack2-fork-ts-checker/src/index.ts     |  5 +++
 .../webpack2-fork-ts-checker/tsconfig.json    |  4 +++
 .../webpack.config.js                         | 32 +++++++++++++++++++
 7 files changed, 76 insertions(+)
 create mode 100644 examples/webpack2-fork-ts-checker/package.json
 create mode 100644 examples/webpack2-fork-ts-checker/src/fileWithError.ts
 create mode 100644 examples/webpack2-fork-ts-checker/src/fileWithoutError.ts
 create mode 100644 examples/webpack2-fork-ts-checker/src/index.ts
 create mode 100644 examples/webpack2-fork-ts-checker/tsconfig.json
 create mode 100644 examples/webpack2-fork-ts-checker/webpack.config.js

diff --git a/README.md b/README.md
index dbc734f0c..47ac5ce45 100644
--- a/README.md
+++ b/README.md
@@ -294,6 +294,19 @@ The same basic process is required for code splitting. In this case, you `import
 don't directly use them. Instead you require them at [split points](http://webpack.github.io/docs/code-splitting.html#defining-a-split-point).
 See [this example](test/comparison-tests/codeSplitting) and [this example](test/comparison-tests/es6codeSplitting) for more details.
 
+### Faster incremental builds
+
+As your project becomes bigger and bigger, compilation time increases linearly. It's because typescript's semantic checker has to inspect
+all files on every rebuild. 
+
+The simple solution is to disable it by `transpileOnly: true` option but it leaves you without type checking.
+
+If you don't want give up type checking, you can use [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin).
+It runs checker on separate process, so your build is as fast as with `transpileOnly: true`. Also, it has several optimizations to make
+incremental type checking faster (AST cache, multiple workers).
+
+If you'd like to see a simple setup take a look at [our example](examples/webpack2-fork-ts-checker/).
+
 ## License
 
 MIT License
diff --git a/examples/webpack2-fork-ts-checker/package.json b/examples/webpack2-fork-ts-checker/package.json
new file mode 100644
index 000000000..007517c66
--- /dev/null
+++ b/examples/webpack2-fork-ts-checker/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "webpack2-fork-ts-checker",
+  "main": "index.js",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "./node_modules/.bin/webpack --watch"
+  },
+  "devDependencies": {
+    "fork-ts-checker-webpack-plugin": "^0.1.2",
+    "ts-loader": "^2.0.3",
+    "typescript": "^2.2.2",
+    "webpack": "^2.2.0"
+  }
+}
diff --git a/examples/webpack2-fork-ts-checker/src/fileWithError.ts b/examples/webpack2-fork-ts-checker/src/fileWithError.ts
new file mode 100644
index 000000000..33ac93f2b
--- /dev/null
+++ b/examples/webpack2-fork-ts-checker/src/fileWithError.ts
@@ -0,0 +1,4 @@
+
+const x: number = '1';
+
+export = x;
diff --git a/examples/webpack2-fork-ts-checker/src/fileWithoutError.ts b/examples/webpack2-fork-ts-checker/src/fileWithoutError.ts
new file mode 100644
index 000000000..782887160
--- /dev/null
+++ b/examples/webpack2-fork-ts-checker/src/fileWithoutError.ts
@@ -0,0 +1,4 @@
+
+const x: number = 1;
+
+export = x;
diff --git a/examples/webpack2-fork-ts-checker/src/index.ts b/examples/webpack2-fork-ts-checker/src/index.ts
new file mode 100644
index 000000000..74b421cb0
--- /dev/null
+++ b/examples/webpack2-fork-ts-checker/src/index.ts
@@ -0,0 +1,5 @@
+
+import * as x1 from './fileWithoutError';
+import * as x2 from './fileWithError';
+
+export = x1 + x2;
diff --git a/examples/webpack2-fork-ts-checker/tsconfig.json b/examples/webpack2-fork-ts-checker/tsconfig.json
new file mode 100644
index 000000000..aa5798f3c
--- /dev/null
+++ b/examples/webpack2-fork-ts-checker/tsconfig.json
@@ -0,0 +1,4 @@
+{
+    "compilerOptions": {
+    }
+}
diff --git a/examples/webpack2-fork-ts-checker/webpack.config.js b/examples/webpack2-fork-ts-checker/webpack.config.js
new file mode 100644
index 000000000..bac2155e0
--- /dev/null
+++ b/examples/webpack2-fork-ts-checker/webpack.config.js
@@ -0,0 +1,32 @@
+'use strict';
+
+var process = require('process');
+var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+module.exports = {
+    context: __dirname, // to automatically find tsconfig.json
+    entry: './src/index.ts',
+    output: { filename: 'index.js' },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                loader: 'ts-loader',
+                options: {
+                    transpileOnly: true // IMPORTANT! use transpileOnly mode to speed-up compilation
+                }
+            }
+        ]
+    },
+    resolve: {
+        extensions: [ '.ts', '.tsx' ]
+    },
+    plugins: [
+        new ForkTsCheckerWebpackPlugin({
+            tslint: false, // disable tslint support
+            watch: './src', // optional but improves performance (less stat calls)
+            workers: ForkTsCheckerWebpackPlugin.TWO_CPUS_FREE, // use multi-process mode, leave 2 cpu's free for builder and system
+            blockEmit: process.env.NODE_ENV === 'production' // for production make it synchronous
+        })
+    ]
+};