From 1dd0366c054ee05d2f9bb3b87f7da0e994fb84ea Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Fri, 30 Mar 2018 16:24:52 -0400 Subject: [PATCH] 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 | 2 +- package-lock.json | 31 ++++++++++++++++++++++++++++++ package.json | 3 ++- tsconfig.json | 3 --- webpack.config.js | 32 ++++++++++--------------------- 5 files changed, 44 insertions(+), 27 deletions(-) diff --git a/config/watch-timestamps-plugin.js b/config/watch-timestamps-plugin.js index 942ddb85..d193f5c6 100644 --- a/config/watch-timestamps-plugin.js +++ b/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; diff --git a/package-lock.json b/package-lock.json index bff35360..d6171f3b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ae4e2b3a..5b032fe7 100644 --- a/package.json +++ b/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", diff --git a/tsconfig.json b/tsconfig.json index e65b85bc..8dbfb6a8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,8 +1,5 @@ { "compileOnSave": false, - "files": [ - "src/**/*.{ts,tsx}" - ], "compilerOptions": { "strict": true, "target": "es2017", diff --git a/webpack.config.js b/webpack.config.js index 6fc65dbb..d2d18149 100644 --- a/webpack.config.js +++ b/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', - // Don't transpile anything in node_modules: - exclude: nodeModules, - options: { - // Offload type checking to ForkTsCheckerWebpackPlugin for better performance: - transpileOnly: true - } + use: [ + // pluck the sourcemap back out so Babel creates a composed one: + 'source-map-loader', + 'ts-loader' + ] }, { - 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, - hot: true, + compress: true, // Request paths not ending in a file extension serve index.html: historyApiFallback: true, // Don't output server address info to console on startup: