Merge pull request #7148 from dagda1/replace-file-loader-with-assets-loader

Replace deprecated loaders with new `assets-module`

.changeset/curvy-timers-sit.md

@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+replace the deprecated file-loader for fonts with assets module

packages/cli/package.json

@@ -74,7 +74,6 @@
     "eslint-plugin-react": "^7.12.4",
     "eslint-plugin-react-hooks": "^4.0.0",
     "express": "^4.17.1",
-    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^4.0.5",
     "fs-extra": "9.1.0",
     "handlebars": "^4.7.3",
@@ -89,7 +88,6 @@
     "ora": "^5.3.0",
     "postcss": "^8.1.0",
     "process": "^0.11.10",
-    "raw-loader": "^4.0.1",
     "react": "^16.0.0",
     "react-dev-utils": "^11.0.4",
     "react-hot-loader": "^4.12.21",
@@ -109,7 +107,6 @@
     "terser-webpack-plugin": "^5.1.3",
     "ts-loader": "^8.0.17",
     "typescript": "^4.0.3",
-    "url-loader": "^4.1.0",
     "util": "^0.12.3",
     "webpack": "^5.48.0",
     "webpack-dev-server": "4.0.0-rc.0",

packages/cli/src/lib/bundler/transforms.ts

@@ -83,22 +83,17 @@ export const transforms = (options: TransformOptions): Transforms => {
         { and: [/\.svg/, { not: [/\.icon\.svg/] }] },
         /\.xml/,
       ],
-      loader: require.resolve('url-loader'),
-      options: {
-        limit: 10000,
-        name: 'static/[name].[hash:8].[ext]',
+      type: 'asset/resource',
+      generator: {
+        filename: 'static/[name].[hash:8].[ext]',
       },
     },
     {
-      test: /\.(eot|woff|woff2|ttf)$/,
-      use: [
-        {
-          loader: require.resolve('file-loader'),
-          options: {
-            name: 'static/[name].[hash:8].[ext]',
-          },
-        },
-      ],
+      test: /\.(eot|woff|woff2|ttf)$/i,
+      type: 'asset/resource',
+      generator: {
+        filename: 'static/[name].[hash][ext][query]',
+      },
     },
     {
       test: /\.ya?ml$/,
@@ -106,7 +101,10 @@ export const transforms = (options: TransformOptions): Transforms => {
     },
     {
       include: /\.(md)$/,
-      use: require.resolve('raw-loader'),
+      type: 'asset/resource',
+      generator: {
+        filename: 'static/[name].[hash][ext][query]',
+      },
     },
     {
       test: /\.css$/i,

yarn.lock

@@ -22322,7 +22322,7 @@ raw-body@^2.4.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-raw-loader@^4.0.1, raw-loader@^4.0.2:
+raw-loader@^4.0.2:
   version "4.0.2"
   resolved "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
   integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
@@ -26694,7 +26694,7 @@ urix@^0.1.0:
   resolved "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
   integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
-url-loader@^4.1.0, url-loader@^4.1.1:
+url-loader@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
   integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==