Merge branch 'webpack-v5'

Author: pimterry

automation/tsconfig.json

@@ -13,5 +13,7 @@
         ]
     },
     "files": [],
-    "include": []
+    "include": [
+      "../custom-typings/**/*.d.ts"
+    ]
 }

automation/webpack.common.ts

@@ -2,7 +2,7 @@ import * as path from 'path';
 import * as Webpack from 'webpack';
 
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-import GoogleFontsPlugin from 'google-fonts-plugin';
+import GoogleFontsPlugin from '@beyonk/google-fonts-webpack-plugin';
 import CopyPlugin from 'copy-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import ForkTsCheckerNotifierWebpackPlugin from 'fork-ts-checker-notifier-webpack-plugin';
@@ -19,15 +19,33 @@ export default <Webpack.Configuration>{
 
     output: {
         path: OUTPUT_DIR,
-        filename: 'app.js',
+        filename: '[name].js',
         chunkFilename: '[name].bundle.js',
-        // https://github.com/webpack-contrib/worker-loader/issues/142
-        // Stops HMR breaking worker-loader
-        globalObject: 'this'
+        clean: true
     },
 
     resolve: {
-        extensions: ['.mjs', '.js', '.ts', '.tsx', '.json']
+        extensions: ['.mjs', '.ts', '.tsx', '...'],
+        fallback: {
+            fs: false,
+            net: false,
+            tls: false,
+            http: false,
+
+            assert: require.resolve('assert/'),
+            crypto: require.resolve('crypto-browserify'),
+            path: require.resolve('path-browserify'),
+            process: require.resolve('process/browser'),
+            querystring: require.resolve('querystring-es3'),
+            stream: require.resolve('stream-browserify'),
+            buffer: require.resolve('buffer/'),
+            url: require.resolve('url/'),
+            util: require.resolve('util/'),
+            zlib: require.resolve('browserify-zlib')
+        },
+        alias: {
+            mockrtc$: path.resolve(__dirname, '../node_modules/mockrtc/dist/main-browser.js')
+        }
     },
 
     stats: {
@@ -46,7 +64,6 @@ export default <Webpack.Configuration>{
         rules: [{
             test: /\.tsx?$/,
             use: [
-                { loader: 'cache-loader' },
                 {
                     loader: 'thread-loader',
                     options: {
@@ -69,8 +86,8 @@ export default <Webpack.Configuration>{
             ],
             exclude: /node_modules/
         }, {
-            test: /\.(woff2|ttf|png|svg)$/,
-            loader: 'file-loader'
+            test: /\.(png|svg)$/,
+            type: 'asset/resource'
         }, {
             test: /\.mjs$/,
             include: /node_modules/,
@@ -80,18 +97,15 @@ export default <Webpack.Configuration>{
             use: ['style-loader', 'css-loader']
         }, {
             test: /amiusing.html$/,
-            use: 'raw-loader'
+            type: 'asset/source'
         }, {
             test: /node_modules[\\|/]typesafe-get/,
             use: { loader: 'umd-compat-loader' }
         }]
     },
 
-    node: {
-        process: true,
-        fs: 'empty',
-        net: 'empty',
-        tls: 'empty'
+    experiments: {
+        asyncWebAssembly: true
     },
 
     plugins: [
@@ -106,18 +120,21 @@ export default <Webpack.Configuration>{
             }
         }),
         new ForkTsCheckerNotifierWebpackPlugin(),
-        new Webpack.IgnorePlugin(
+        new Webpack.IgnorePlugin({
             // Fallback, only used in wasm isn't supported. We just don't support zstd
             // if wasm isn't supported (i.e. if loaded custom in old old browsers).
-            /\/zstd-codec-binding.js$/, /zstd-codec/
-        ),
+            resourceRegExp: /\/zstd-codec-binding.js$/,
+            contextRegExp: /zstd-codec/
+        }),
         new HtmlWebpackPlugin({
             template: path.join(SRC_DIR, 'index.html')
         }),
-        new CopyPlugin([
-            { from: 'node_modules/openapi-directory/api', to: 'api' },
-            { from: './extra-apis', to: 'api' },
-        ]),
+        new CopyPlugin({
+            patterns: [
+                { from: 'node_modules/openapi-directory/api', to: 'api' },
+                { from: './extra-apis', to: 'api' },
+            ]
+        }),
         new MonacoWebpackPlugin({
             languages: [
                 'html',
@@ -153,7 +170,12 @@ export default <Webpack.Configuration>{
                 { family: "Lato" }
             ],
             formats: ['woff2'], // Supported by Chrome, FF, Edge, Safari 12+
-            filename: 'fonts.css'
+            filename: 'fonts.css',
+            apiUrl: 'https://gwfh.mranftl.com/api/fonts'
+        }),
+        new Webpack.ProvidePlugin({
+            'process': 'process/browser.js',
+            'Buffer': ['buffer', 'Buffer']
         }),
         new Webpack.EnvironmentPlugin({
             'SENTRY_DSN': null,

automation/webpack.dev.ts

@@ -1,4 +1,5 @@
 import * as path from "path";
+import * as Webpack from 'webpack';
 
 import merge from 'webpack-merge';
 import common from './webpack.common';
@@ -9,9 +10,7 @@ export default merge(common, {
     devtool: 'eval-cheap-module-source-map' as any,
 
     devServer: {
-        contentBase: common.output!.path!,
         host: '127.0.0.1',
-        public: 'local.httptoolkit.tech:8080',
         historyApiFallback: true
     },
 
@@ -25,9 +24,16 @@ export default merge(common, {
                     path.join(__dirname, '..', 'node_modules', 'monaco-editor'),
                     path.join(__dirname, '..', 'node_modules', 'subscriptions-transport-ws'),
                     path.join(__dirname, '..', '..', 'mockttp', 'node_modules', 'subscriptions-transport-ws'),
-                    path.join(__dirname, '..', 'node_modules', 'js-beautify')
+                    path.join(__dirname, '..', 'node_modules', 'js-beautify'),
+                    path.join(__dirname, '..', 'node_modules', 'graphql-subscriptions'),
                 ]
             }
         ]
-    }
+    },
+
+    plugins: [
+        new Webpack.DefinePlugin({
+            'process.env.DISABLE_UPDATES': 'true'
+        })
+    ]
 });

automation/webpack.prod.ts

@@ -5,6 +5,8 @@ import SentryPlugin from '@sentry/webpack-plugin';
 import { InjectManifest } from 'workbox-webpack-plugin';
 import * as ssri from "ssri";
 
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+
 import common from "./webpack.common";
 
 const shouldPublishSentryRelease =
@@ -22,16 +24,38 @@ export default merge(common, {
     // Automatically split into source/vendor bundle chunks.
     // Here because this breaks TS-node in the tests, not clear why.
     optimization: {
+        chunkIds: 'named',
         splitChunks: {
-            chunks: (chunk) => {
-                // React monaco editor is 99.99% vendor code, so splitting it
-                // just creates an absurdly tiny extra bundle.
-                return chunk.name !== "react-monaco-editor";
-            },
+            chunks: 'all',
+
+            // Split out various extra chunks for libraries that we know to be large & either
+            // rarely used or updated differently to other code in the frontend. The goal is to
+            // avoid re-downloading large non-updated libs when often-updated libs change.
+            // This is a bit suspect - definitely more art then science right now.
             cacheGroups: {
+                // Zstd is rarely used, big-ish, always loaded async, and v rarely changed:
                 zstd: {
                     test: /[\\/]node_modules[\\/]zstd-codec[\\/]/,
-                    name: "zstd"
+                    name: 'zstd'
+                },
+
+                // Monaco is loaded async, v large, and rarely changed:
+                monaco: {
+                    test: /[\\/]node_modules[\\/](monaco-editor|react-monaco-editor)[\\/]/,
+                    name: 'monaco'
+                },
+
+                // APIs change on a completely independent schedule to anything else:
+                apis: {
+                    test: /[\\/]node_modules[\\/]openapi-directory[\\/]/,
+                    name: 'apis'
+                },
+
+                // Mockttp is relatively frequently changed, so pulling it into
+                // a separate chunk avoids churn elsewhere:
+                mockttp: {
+                    test: /[\\/]node_modules[\\/]mockttp[\\/]/,
+                    name: 'mockttp'
                 }
             }
         }
@@ -77,6 +101,11 @@ export default merge(common, {
                 validate: true
             })
         ]
-        : [])
+        : []),
+        new BundleAnalyzerPlugin({
+            analyzerMode: 'static',
+            openAnalyzer: false,
+            excludeAssets: /api\/.*\.json/
+        })
     ]
 });

automation/webpack.unittest.ts

@@ -1,12 +1,19 @@
 import * as _ from 'lodash';
+import * as Webpack from 'webpack';
+
 import * as tmp from 'tmp';
 tmp.setGracefulCleanup();
 
 import commonConfig from './webpack.common';
 
 commonConfig.mode = 'development';
 commonConfig.entry = undefined;
-commonConfig.plugins = undefined;
+commonConfig.plugins = [
+    new Webpack.ProvidePlugin({
+        'process': 'process/browser.js',
+        'Buffer': ['buffer', 'Buffer']
+    }),
+];
 commonConfig.output = {
     path: tmp.dirSync().name,
 };

custom-typings/@beyonk__google-fonts-webpack-plugin.d.ts

@@ -0,0 +1 @@
+declare module '@beyonk/google-fonts-webpack-plugin';