Fix broken sourcemaps in the TypeScript+Babel setup, clean up webpack config, drop threaded type checking (couldn't get it working)

config/watch-timestamps-plugin.js

@@ -13,7 +13,7 @@ module.exports = class WatchTimestampsPlugin {
   }
 
   apply(compiler) {
-    compiler.plugin('watch-run', (watch, callback) => {
+    compiler.hooks.watchRun.tapAsync('watch-timestamps-plugin', (watch, callback) => {
       const patterns = this.patterns;
       const timestamps = watch.fileTimestamps;
 

package-lock.json

@@ -12588,6 +12588,37 @@
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
       "dev": true
     },
+    "source-map-loader": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-0.2.3.tgz",
+      "integrity": "sha512-MYbFX9DYxmTQFfy2v8FC1XZwpwHKYxg3SK8Wb7VPBKuhDjz8gi9re2819MsG4p49HDyiOSUKlmZ+nQBArW5CGw==",
+      "dev": true,
+      "requires": {
+        "async": "2.6.0",
+        "loader-utils": "0.2.17",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "0.2.17",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
+          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+          "dev": true,
+          "requires": {
+            "big.js": "3.2.0",
+            "emojis-list": "2.1.0",
+            "json5": "0.5.1",
+            "object-assign": "4.1.1"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "source-map-resolve": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.1.tgz",

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "license": "apache-2.0",
   "scripts": {
-    "start": "webpack serve --hot --inline",
+    "start": "webpack serve --hot",
     "build": "webpack -p",
     "lint": "eslint src"
   },
@@ -53,6 +53,7 @@
     "progress-bar-webpack-plugin": "^1.11.0",
     "sass-loader": "^6.0.7",
     "script-ext-html-webpack-plugin": "^2.0.1",
+    "source-map-loader": "^0.2.3",
     "style-loader": "^0.20.3",
     "ts-loader": "^4.0.1",
     "tslint": "^5.9.1",

tsconfig.json

@@ -1,8 +1,5 @@
 {
   "compileOnSave": false,
-  "files": [
-    "src/**/*.{ts,tsx}"
-  ],
   "compilerOptions": {
     "strict": true,
     "target": "es2017",

webpack.config.js

@@ -1,8 +1,6 @@
 const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const ForkTsCheckerNotifierWebpackPlugin = require('fork-ts-checker-notifier-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -29,6 +27,7 @@ module.exports = function(_, env) {
   return {
     mode: isProd ? 'production' : 'development',
     entry: './src/index',
+    devtool: isProd ? 'source-map' : 'inline-source-map',
     output: {
       filename: isProd ? '[name].[chunkhash:5].js' : '[name].js',
       chunkFilename: '[name].chunk.[chunkhash:5].js',
@@ -51,18 +50,17 @@ module.exports = function(_, env) {
       rules: [
         {
           test: /\.tsx?$/,
+          exclude: nodeModules,
           // Ensure typescript is compiled prior to Babel running:
           enforce: 'pre',
-          loader: 'ts-loader',
+          use: [
-          // Don't transpile anything in node_modules:
+            // pluck the sourcemap back out so Babel creates a composed one:
-          exclude: nodeModules,
+            'source-map-loader',
-          options: {
+            'ts-loader'
-            // Offload type checking to ForkTsCheckerWebpackPlugin for better performance:
+          ]
-            transpileOnly: true
-          }
         },
         {
-          test: /\.(tsx?|jsx?)$/,
+          test: /\.(ts|js)x?$/,
           loader: 'babel-loader',
           // Don't respect any Babel RC files found on the filesystem:
           options: Object.assign(readJson('.babelrc'), { babelrc: false })
@@ -118,18 +116,9 @@ module.exports = function(_, env) {
       ]
     },
     plugins: [
-      // Runs tslint & type checking in a worker pool
-      new ForkTsCheckerWebpackPlugin({
-        tslint: true,
-        // wait for type chec
-        async: !isProd,
-        formatter: 'codeframe'
-      }),
-      new ForkTsCheckerNotifierWebpackPlugin({ excludeWarnings: true }),
-
       // Pretty progressbar showing build progress:
       new ProgressBarPlugin({
-        format: '\u001b[90m\u001b[44mBuild\u001b[49m\u001b[39m [:bar] \u001b[32m\u001b[1m:percent\u001b[22m\u001b[39m (:elapseds) \u001b[2m:msg\u001b[22m',
+        format: '\u001b[90m\u001b[44mBuild\u001b[49m\u001b[39m [:bar] \u001b[32m\u001b[1m:percent\u001b[22m\u001b[39m (:elapseds) \u001b[2m:msg\u001b[22m\r',
         renderThrottle: 100,
         summary: false,
         clear: true
@@ -249,8 +238,7 @@ module.exports = function(_, env) {
     devServer: {
       // Any unmatched request paths will serve static files from src/*:
       contentBase: path.join(__dirname, 'src'),
-      inline: true,
+      compress: true,
-      hot: true,
       // Request paths not ending in a file extension serve index.html:
       historyApiFallback: true,
       // Don't output server address info to console on startup: