Add webpack file-loader to handle images

It lets us bundle static files such as images.

Allows us to `imports img from "./img.png"` to retrieve an image's path.
Note that we'll have to add other entries in the global.d.ts file if we
want to handle other extensions than .png.

Adds mocks to Jest tests so that we don't fail tests when loading static
assets.

jest.config.js

@@ -8,4 +8,8 @@ module.exports = {
     '.cypress', 'node_modules', 'dist',
   ],
   testEnvironment: "jsdom",
+  moduleNameMapper: {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
+    "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
+  }
 };

package.json

@@ -71,6 +71,7 @@
     "electron": "^14.0.2",
     "electron-packager": "^15.4.0",
     "eslint": "^7.24.0",
+    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.3.3",
     "html-webpack-plugin": "^3.2.0",
     "http-server": "^13.0.1",

src/@types/global.d.ts

@@ -1,2 +1,8 @@
 // Defined by webpack on startup or compilation
 declare let __COMMIT_HASH__: string;
+
+// When using file-loader, we'll get a path to the resource
+declare module "*.png" {
+  const value: string;
+  export default value;
+}

test/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

webpack.config.js

@@ -156,6 +156,14 @@ module.exports = (env, argv) => {
           test: /\.s?css$/,
           use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
         },
+        {
+          test: /\.(png|jpe?g|gif|jp2|webp)$/,
+          loader: 'file-loader',
+          options: {
+            name: '[contenthash].[ext]',
+            outputPath: 'dist/images',
+          },
+        },
       ],
     },
     optimization: {