Use asset modules in react-scripts

Author: Morten N.O. Henriksen

packages/react-scripts/config/webpack.config.js

@@ -358,22 +358,30 @@ module.exports = function (webpackEnv) {
             // https://github.com/jshttp/mime-db
             {
               test: [/\.avif$/],
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: imageInlineSizeLimit,
-                mimetype: 'image/avif',
-                name: 'static/media/[name].[hash:8].[ext]',
+              type: 'asset',
+              mimetype: 'image/avif',
+              generator: {
+                filename: 'static/media/[hash][ext][query]',
+              },
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
+                },
               },
             },
             // "url" loader works like "file" loader except that it embeds assets
             // smaller than specified limit in bytes as data URLs to avoid requests.
             // A missing `test` is equivalent to a match.
             {
               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: imageInlineSizeLimit,
-                name: 'static/media/[name].[hash:8].[ext]',
+              type: 'asset',
+              generator: {
+                filename: 'static/media/[hash][ext][query]',
+              },
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
+                },
               },
             },
             // Process application JS with Babel.
@@ -558,14 +566,14 @@ module.exports = function (webpackEnv) {
             // This loader doesn't use a "test" so it will catch all modules
             // that fall through the other loaders.
             {
-              loader: require.resolve('file-loader'),
               // Exclude `js` files to keep "css" loader working as it injects
               // its runtime that would otherwise be processed through "file" loader.
               // Also exclude `html` and `json` extensions so they get processed
               // by webpacks internal loaders.
               exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-              options: {
-                name: 'static/media/[name].[hash:8].[ext]',
+              type: 'asset/resource',
+              generator: {
+                filename: 'static/media/[hash][ext][query]',
               },
             },
             // ** STOP ** Are you adding a new loader?

packages/react-scripts/package.json

@@ -55,7 +55,6 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "^3.9.2",
     "eslint-webpack-plugin": "^2.5.2",
-    "file-loader": "6.2.0",
     "fs-extra": "^9.0.1",
     "html-webpack-plugin": "5.2.0",
     "identity-obj-proxy": "3.0.0",
@@ -79,7 +78,6 @@
     "semver": "7.3.4",
     "style-loader": "2.0.0",
     "ts-pnp": "1.2.0",
-    "url-loader": "4.1.1",
     "webpack": "5.24.3",
     "webpack-dev-server": "4.0.0-beta.0",
     "webpack-manifest-plugin": "3.0.0",