Replace file-loader with asset modules

It's been deprecated in favor of
https://webpack.js.org/guides/asset-modules/

Author: mwiencek

package.json

@@ -31,7 +31,6 @@
     "cookie": "0.4.0",
     "core-js": "3.6.5",
     "detect-node": "2.0.3",
-    "file-loader": "6.2.0",
     "filesize": "2.0.4",
     "generic-diff": "1.0.1",
     "he": "1.1.1",

root/flowstub.js.flow

@@ -2,6 +2,6 @@
  * @flow strict
  * Bogus file for use in .flowconfig.
  * Non-JavaScript files are mapped to here, so we can require() them
- * via Webpack's file-loader without Flow triggering import errors.
+ * via Webpack's asset modules without Flow triggering import errors.
  */
 export default ({}: mixed);

root/static/manifest.js

@@ -10,7 +10,7 @@
  * This module is used to look up assets in webpack's manifest, which maps
  * asset names to their public URLs (which include a hash in the filename
  * in production). This is really only useful for looking up JavaScript
- * bundles; for other types of assets, we use webpack's file-loader. This
+ * bundles; for other types of assets, we use webpack's asset modules. This
  * module shouldn't be used in any client scripts, as it makes no sense
  * there. The actual manifest file (./build/rev-manifest) doesn't exist
  * until after the client scripts are bundled.

webpack/moduleConfig.js

@@ -35,32 +35,22 @@ module.exports = {
     },
     {
       test: /\.(png|svg|jpg|gif)$/,
-      use: [
-        {
-          loader: 'file-loader',
-          options: {
-            name: (
-              PRODUCTION_MODE
-                ? '[name]-[hash:7].[ext]'
-                : '[name].[ext]'
-            ),
-          },
-        },
-      ],
+      type: 'asset/resource',
+      generator: {
+        filename: PRODUCTION_MODE
+          ? '[name]-[hash:7][ext]'
+          : '[name][ext]',
+      },
     },
     {
       test: /\.less$/,
+      type: 'asset/resource',
+      generator: {
+        filename: PRODUCTION_MODE
+          ? '[name]-[hash:7].css'
+          : '[name].css',
+      },
       use: [
-        {
-          loader: 'file-loader',
-          options: {
-            name: (
-              PRODUCTION_MODE
-                ? '[name]-[hash:7].css'
-                : '[name].css'
-            ),
-          },
-        },
         {
           loader: 'less-loader',
           options: {lessOptions},

yarn.lock

@@ -2856,14 +2856,6 @@ file-entry-cache@^5.0.1:
   dependencies:
     flat-cache "^2.0.1"
 
-[email protected]:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
-  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
-  dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^3.0.0"
-
 [email protected]:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/file-url/-/file-url-2.0.2.tgz#e951784d79095127d3713029ab063f40818ca2ae"
@@ -3801,15 +3793,6 @@ loader-utils@^1.4.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
-loader-utils@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
-  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^2.1.2"
-
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"