Faster webpack builds.

- Use thread-loader, and fork-ts-checker-webpack-plugin to parallelize build & type checking.
- Use cache-loader to speed up build.
- Fix localStorage mock to work with new type checking. (localStorage was already decleared)
- Remove awesome-typescript-loader as it is no longer used.
- Add .cache-loader to gitignore.

.gitignore

@@ -4,6 +4,7 @@
 /bin
 /gopath
 /Godeps/_workspace/src/github.com/coreos-inc/bridge
+/frontend/.cache-loader
 /frontend/__coverage__
 /frontend/public/bower_components
 /frontend/node_modules

frontend/__mocks__/localStorage.ts

@@ -0,0 +1,13 @@
+let _localStorage = {};
+
+(window as any).localStorage = {
+ setItem(key, value) {
+ return Object.assign(_localStorage, {[key]: value});
+ },
+ getItem(key) {
+ return _localStorage[key];
+ },
+ clear() {
+ _localStorage = {};
+ }
+};

frontend/package.json

@@ -31,7 +31,7 @@
  "testRegex": "/__tests__/.*\\.(ts|tsx|js|jsx)$",
  "setupFiles": [
  "./__mocks__/requestAnimationFrame.js",
- "./__mocks__/localStorage.js",
+ "./__mocks__/localStorage.ts",
  "./before-tests.js"
  ],
  "coverageDirectory": "__coverage__",
@@ -91,7 +91,7 @@
  "@types/react-router-dom": "4.x",
  "@types/react-transition-group": "2.x",
  "@types/webpack": "^3.8.2",
- "awesome-typescript-loader": "3.x",
+ "cache-loader": "1.x",
  "chromedriver": "2.x",
  "css-loader": "0.28.x",
  "enzyme": "3.x",
@@ -101,6 +101,7 @@
  "eslint-plugin-react": "7.x",
  "extract-text-webpack-plugin": "3.x",
  "file-loader": "1.x",
+ "fork-ts-checker-webpack-plugin": "0.x",
  "glslify-loader": "1.x",
  "html-webpack-plugin": "2.x",
  "jasmine-core": "2.x",
@@ -115,8 +116,9 @@
  "resolve-url-loader": "2.x",
  "sass-loader": "6.x",
  "style-loader": "0.19.x",
+ "thread-loader": "1.x",
  "ts-jest": "20.x",
- "ts-loader": "2.x",
+ "ts-loader": "3.x",
  "ts-node": "^3.3.0",
  "typescript": "2.6.x",
  "typescript-eslint-parser": "10.x",

frontend/webpack.config.ts

@@ -5,6 +5,7 @@ import * as path from 'path';
 import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
 import * as HtmlWebpackPlugin from 'html-webpack-plugin';
 import * as UglifyJsPlugin from 'uglifyjs-webpack-plugin';
+import * as ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
 const NODE_ENV = process.env.NODE_ENV;
 
@@ -34,12 +35,30 @@ let config: webpack.Configuration = {
  {
  test: /(\.jsx?)|(\.tsx?)$/,
  exclude: /node_modules/,
- loader: 'awesome-typescript-loader',
+ use: [
+ { loader: 'cache-loader' },
+ {
+ loader: 'thread-loader',
+ options: {
+ // Leave one core spare for fork-ts-checker-webpack-plugin
+ workers: require('os').cpus().length - 1,
+ }
+ },
+ {
+ loader: 'ts-loader',
+ options: {
+ happyPackMode: true, // This implicitly enables transpileOnly! No type checking!
+ transpileOnly: true, // fork-ts-checker-webpack-plugin takes care of type checking
+ }
+ },
+ ],
  },
  {
  test: /\.s?css$/,
  use: extractSass.extract({
  use: [
+ { loader: 'cache-loader' },
+ { loader: 'thread-loader' },
  {
  loader: 'css-loader',
  options: {
@@ -83,6 +102,7 @@ let config: webpack.Configuration = {
  return /node_modules/.test(resource);
  },
  }),
+ new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true }),
  extractSass,
  new HtmlWebpackPlugin({
  filename: './tokener.html',