webpack: Inline getExposeLoaders abstraction.

We only have two of these and don’t intend to add more.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

static/js/bundles/common.js

@@ -1,7 +1,7 @@
 import "core-js/features/promise";
 import "core-js/features/symbol";
 import "../../../tools/debug-require";
-import "jquery/dist/jquery.js";
+import "jquery";
 import "../page_params.js";
 import "../csrf.js";
 import "../blueslip.js";

tools/debug-require-webpack-plugin.ts

@@ -46,7 +46,7 @@ export default class DebugRequirePlugin {
                     resolver.resolve(
                         {},
                         __dirname,
-                        "./debug-require.js",
+                        "./debug-require",
                         {},
                         (err?: Error, result?: string) => (err ? reject(err) : resolve(result)),
                     ),

tools/webpack-helpers.ts

@@ -1,6 +1,6 @@
-import {basename, resolve} from "path";
+import {resolve} from "path";
 
-import {RuleSetRule, RuleSetUseItem} from "webpack";
+import {RuleSetUseItem} from "webpack";
 
 export const cacheLoader: RuleSetUseItem = {
     loader: "cache-loader",
@@ -8,37 +8,3 @@ export const cacheLoader: RuleSetUseItem = {
         cacheDirectory: resolve(__dirname, "../var/webpack-cache"),
     },
 };
-
-/* Return expose-loader format to the config
-    For example
-    [
-        // Exposes 'my_module' as the name
-        {path: './folder/my_module.js'},
-
-        // Exposes 'my_custom_name'
-        {path: './folder/my_module.js', name: 'my_custom_name'},
-
-        // Exposes 'name1' and 'name2'
-        {path: './folder/my_module.js', name: ['name1', 'name2']}
-    ]
-*/
-interface ExportLoaderOptions {
-    path: string;
-    name?: string | string[];
-}
-
-export function getExposeLoaders(optionsArr: ExportLoaderOptions[]): RuleSetRule[] {
-    return optionsArr.map(({path, name}) => ({
-        test: require.resolve(path),
-        use: [
-            cacheLoader,
-            {
-                loader: "expose-loader",
-                options: {
-                    // If no name is provided, infer it
-                    exposes: name ?? basename(path, ".js"),
-                },
-            },
-        ],
-    }));
-}

tools/webpack.config.ts

@@ -12,7 +12,7 @@ import _webpackDevServer from "webpack-dev-server";
 import BundleTracker from "webpack4-bundle-tracker";
 
 import DebugRequirePlugin from "./debug-require-webpack-plugin";
-import {cacheLoader, getExposeLoaders} from "./webpack-helpers";
+import {cacheLoader} from "./webpack-helpers";
 import assets from "./webpack.assets.json";
 
 export default (env?: string): webpack.Configuration[] => {
@@ -24,6 +24,16 @@ export default (env?: string): webpack.Configuration[] => {
         entry: assets,
         module: {
             rules: [
+                {
+                    test: require.resolve("./debug-require"),
+                    loader: "expose-loader",
+                    options: {exposes: "require"},
+                },
+                {
+                    test: require.resolve("jquery"),
+                    loader: "expose-loader",
+                    options: {exposes: ["$", "jQuery"]},
+                },
                 // Generate webfont
                 {
                     test: /\.font\.js$/,
@@ -239,15 +249,6 @@ export default (env?: string): webpack.Configuration[] => {
         ],
     };
 
-    // Expose Global variables for third party libraries to webpack modules
-    // Use the unminified version of jquery so that
-    // Good error messages show up in production and development in the source maps
-    const exposeOptions = [
-        {path: "./debug-require.js", name: "require"},
-        {path: "jquery/dist/jquery.js", name: ["$", "jQuery"]},
-    ];
-    config.module!.rules.unshift(...getExposeLoaders(exposeOptions));
-
     if (!production) {
         // Out JS debugging tools
         for (const paths of Object.values(assets)) {