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 <[email protected]>
Co-authored-by: Lunny Xiao <[email protected]>
Co-authored-by: Lauris BH <[email protected]>

Author: 4 people

package-lock.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",

package.json

@@ -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
+        }
       },
     ],
   },