Convert Webpack configuration to TypeScript

webpack/configuration.ts

@@ -1,5 +1,5 @@
-const { join } = require('path');
-const { env } = require('process');
+import { join } from 'path';
+import { env } from 'process';
 
 const {
   FE_SUBDIRECTORY,
@@ -21,10 +21,12 @@ const output = {
   path: join(__dirname, '..', outputDir, FE_SUBDIRECTORY),
 };
 
-module.exports = {
+const exportEnv = {
+  NODE_ENV: env.NODE_ENV,
+};
+
+export {
   settings,
-  env: {
-    NODE_ENV: env.NODE_ENV,
-  },
+  exportEnv as env,
   output,
 };

webpack/development.ts

@@ -1,13 +1,16 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
 console.log('Running in development mode'); // eslint-disable-line no-console
 
-const { join } = require('path');
+import { join } from 'path';
 
-const { merge } = require('webpack-merge');
+import { merge } from 'webpack-merge';
 
-const sharedConfig = require('./shared');
+import sharedConfig from './shared';
 
-const watchOptions = {};
+import type { Configuration } from 'webpack';
+import type { Configuration as DevServerConfiguration, ProxyConfigMap } from 'webpack-dev-server';
+
+const watchOptions: Configuration['watchOptions'] = {};
 
 const {
   DEVSERVER_URL,
@@ -36,10 +39,10 @@ const backendEndpoints = [
   '/favicon.png',
 ];
 
-const makeProxyConfig = () => {
+const makeProxyConfig = (): ProxyConfigMap => {
   const secureProxy = PROXY_HTTPS_INSECURE !== 'true';
 
-  const proxyConfig = {};
+  const proxyConfig: ProxyConfigMap = {};
   proxyConfig['/api/patron'] = {
     target: PATRON_URL || DEFAULTS.PATRON_URL,
     secure: secureProxy,
@@ -47,7 +50,7 @@ const makeProxyConfig = () => {
   };
   backendEndpoints.map(endpoint => {
     proxyConfig[endpoint] = {
-      target: BACKEND_URL || DEFAULTS.BACKEND_URL,
+      target: BACKEND_URL,
       secure: secureProxy,
       changeOrigin: true,
     };
@@ -64,13 +67,36 @@ if (process.env.VAGRANT) {
 
 const devServerUrl = (() => {
   try {
-    return new URL(DEVSERVER_URL);
+    return new URL(DEVSERVER_URL || DEFAULTS.DEVSERVER_URL);
   } catch {
     return new URL(DEFAULTS.DEVSERVER_URL);
   }
 })();
 
-module.exports = merge(sharedConfig, {
+const devServer: DevServerConfiguration = {
+  compress: true,
+  host: devServerUrl.hostname,
+  port: devServerUrl.port,
+  https: devServerUrl.protocol === 'https:',
+  hot: false,
+  allowedHosts: 'all',
+  historyApiFallback: {
+    disableDotRule: true,
+    index: join(FE_SUBDIRECTORY, '/'),
+  },
+  headers: {
+    'Access-Control-Allow-Origin': '*',
+  },
+  client: {
+    overlay: true,
+  },
+  static: {
+    serveIndex: true,
+  },
+  proxy: makeProxyConfig(),
+};
+
+const configuration: Configuration = {
   mode: 'development',
   cache: true,
   devtool: 'source-map',
@@ -90,26 +116,7 @@ module.exports = merge(sharedConfig, {
     watchOptions,
   ),
 
-  devServer: {
-    compress: true,
-    host: devServerUrl.hostname,
-    port: devServerUrl.port,
-    https: devServerUrl.protocol === 'https:',
-    hot: false,
-    allowedHosts: 'all',
-    historyApiFallback: {
-      disableDotRule: true,
-      index: join(FE_SUBDIRECTORY, '/'),
-    },
-    headers: {
-      'Access-Control-Allow-Origin': '*',
-    },
-    client: {
-      overlay: true,
-    },
-    static: {
-      serveIndex: true,
-    },
-    proxy: makeProxyConfig(),
-  },
-});
+  devServer,
+};
+
+export default merge<Configuration>(sharedConfig, configuration);

webpack/production.ts

@@ -1,18 +1,21 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
 console.log('Running in production mode'); // eslint-disable-line no-console
 
-const { join } = require('path');
+import { join } from 'path';
 
-const OfflinePlugin = require('@lcdp/offline-plugin');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const { merge } = require('webpack-merge');
+// @ts-ignore: No types available.
+import OfflinePlugin from '@lcdp/offline-plugin';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import { merge } from 'webpack-merge';
 
-const sharedConfig = require('./shared');
+import sharedConfig from './shared';
+
+import type { Configuration } from 'webpack';
 
 const { FE_SUBDIRECTORY } = require(join(__dirname, '..', 'app', 'soapbox', 'build_config'));
-const joinPublicPath = (...paths) => join(FE_SUBDIRECTORY, ...paths);
+const joinPublicPath = (...paths: string[]) => join(FE_SUBDIRECTORY, ...paths);
 
-module.exports = merge(sharedConfig, {
+const configuration: Configuration = {
   mode: 'production',
   devtool: 'source-map',
   stats: 'errors-warnings',
@@ -100,7 +103,7 @@ module.exports = merge(sharedConfig, {
         // NOTE: This function gets stringified by OfflinePlugin, so don't try
         // moving it anywhere else or making it depend on anything outside it!
         // https://github.com/NekR/offline-plugin/blob/master/docs/cache-maps.md
-        match: (url) => {
+        match: (url: URL) => {
           const { pathname } = url;
 
           const backendRoutes = [
@@ -140,4 +143,6 @@ module.exports = merge(sharedConfig, {
       appShell: join(FE_SUBDIRECTORY, '/'),
     }),
   ],
-});
+};
+
+export default merge<Configuration>(sharedConfig, configuration);

webpack/shared.ts

@@ -1,24 +1,24 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
 
-const fs = require('fs');
-const { join, resolve } = require('path');
+import fs from 'fs';
+import { join, resolve } from 'path';
 
-const CopyPlugin = require('copy-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const webpack = require('webpack');
-const AssetsManifestPlugin = require('webpack-assets-manifest');
-const DeadCodePlugin = require('webpack-deadcode-plugin');
+import CopyPlugin from 'copy-webpack-plugin';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import HtmlWebpackHarddiskPlugin from 'html-webpack-harddisk-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import webpack, { Configuration } from 'webpack';
+import AssetsManifestPlugin from 'webpack-assets-manifest';
+import DeadCodePlugin from 'webpack-deadcode-plugin';
 
-const { env, settings, output } = require('./configuration');
-const rules = require('./rules');
+import { env, settings, output } from './configuration';
+import rules from './rules';
 
 const { FE_SUBDIRECTORY, FE_INSTANCE_SOURCE_DIR } = require(join(__dirname, '..', 'app', 'soapbox', 'build_config'));
 
-// Return file as string, or return empty string
-const readFile = filename => {
+/** Return file as string, or return empty string. */
+const readFile = (filename: string) => {
   try {
     return fs.readFileSync(filename, 'utf8');
   } catch {
@@ -26,8 +26,8 @@ const readFile = filename => {
   }
 };
 
-const makeHtmlConfig = (params = {}) => {
-  return Object.assign({
+const makeHtmlConfig = (params = {}): HtmlWebpackPlugin.Options => {
+  const defaults: HtmlWebpackPlugin.Options = {
     template: 'app/index.ejs',
     chunksSortMode: 'manual',
     chunks: ['common', 'locale_en', 'application', 'styles'],
@@ -43,10 +43,12 @@ const makeHtmlConfig = (params = {}) => {
     templateParameters: {
       snippets: readFile(resolve('custom/snippets.html')),
     },
-  }, params);
+  };
+
+  return Object.assign(defaults, params);
 };
 
-module.exports = {
+const configuration: Configuration = {
   entry: {
     application: resolve('app/application.ts'),
   },
@@ -94,6 +96,7 @@ module.exports = {
       filename: 'packs/css/[name]-[contenthash:8].css',
       chunkFilename: 'packs/css/[name]-[contenthash:8].chunk.css',
     }),
+    // @ts-ignore
     new AssetsManifestPlugin({
       integrity: false,
       entrypoints: true,
@@ -101,6 +104,7 @@ module.exports = {
       publicPath: true,
     }),
     // https://github.com/MQuy/webpack-deadcode-plugin
+    // @ts-ignore
     new DeadCodePlugin({
       patterns: [
         'app/**/*',
@@ -160,3 +164,5 @@ module.exports = {
     modules: ['node_modules'],
   },
 };
+
+export default configuration;

webpack/test.js

@@ -1,10 +0,0 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
-console.log('Running in test mode'); // eslint-disable-line no-console
-
-const { merge } = require('webpack-merge');
-
-const sharedConfig = require('./shared');
-
-module.exports = merge(sharedConfig, {
-  mode: 'development',
-});

webpack/test.ts

@@ -0,0 +1,14 @@
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+console.log('Running in test mode'); // eslint-disable-line no-console
+
+import { merge } from 'webpack-merge';
+
+import sharedConfig from './shared';
+
+import type { Configuration } from 'webpack';
+
+const configuration: Configuration = {
+  mode: 'development',
+};
+
+export default merge<Configuration>(sharedConfig, configuration);