Remove file-loader dependency (#15196)

- Upgrade webpack to 5.28 to enable publicPath option
- Use asset modules in place of deprecated file-loader

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: Lauris BH <lauris@nix.lv>

package-lock.json

@@ -3514,37 +3514,6 @@
         "flat-cache": "^3.0.4"
       }
     },
-    "file-loader": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
-      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
-      "requires": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0"
-      },
-      "dependencies": {
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "schema-utils": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
-          "requires": {
-            "@types/json-schema": "^7.0.6",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        }
-      }
-    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -8551,9 +8520,9 @@
       }
     },
     "webpack": {
-      "version": "5.27.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.27.1.tgz",
-      "integrity": "sha512-rxIDsPZ3Apl3JcqiemiLmWH+hAq04YeOXqvCxNZOnTp8ZgM9NEPtbu4CaMfMEf9KShnx/Ym8uLGmM6P4XnwCoA==",
+      "version": "5.28.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.28.0.tgz",
+      "integrity": "sha512-1xllYVmA4dIvRjHzwELgW4KjIU1fW4PEuEnjsylz7k7H5HgPOctIq7W1jrt3sKH9yG5d72//XWzsHhfoWvsQVg==",
       "requires": {
         "@types/eslint-scope": "^3.7.0",
         "@types/estree": "^0.0.46",

package.json

@@ -22,7 +22,6 @@
     "easymde": "2.14.0",
     "escape-goat": "3.0.0",
     "fast-glob": "3.2.5",
-    "file-loader": "6.2.0",
     "font-awesome": "4.7.0",
     "jquery": "3.6.0",
     "jquery.are-you-sure": "1.9.0",
@@ -44,7 +43,7 @@
     "vue-calendar-heatmap": "0.8.4",
     "vue-loader": "15.9.6",
     "vue-template-compiler": "2.6.12",
-    "webpack": "5.27.1",
+    "webpack": "5.28.0",
     "webpack-cli": "4.5.0",
     "workbox-routing": "6.1.2",
     "workbox-strategies": "6.1.2",

webpack.config.js

@@ -211,29 +211,19 @@ module.exports = {
       },
       {
         test: /\.(ttf|woff2?)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-              outputPath: 'fonts/',
-              publicPath: (url) => `../fonts/${url}`, // required to remove css/ path segment
-            },
-          },
-        ],
+        type: 'asset/resource',
+        generator: {
+          filename: 'fonts/[name][ext]',
+          publicPath: '/', // required to remove css/ path segment
+        }
       },
       {
         test: /\.png$/i,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-              outputPath: 'img/webpack/',
-              publicPath: (url) => `../img/webpack/${url}`, // required to remove css/ path segment
-            },
-          },
-        ],
+        type: 'asset/resource',
+        generator: {
+          filename: 'img/webpack/[name][ext]',
+          publicPath: '/', // required to remove css/ path segment
+        }
       },
     ],
   },