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

Replace deprecated loaders with new `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,