Use asset module

Signed-off-by: soupette <cyril@strapi.io>

packages/core/admin/package.json

@@ -65,7 +65,6 @@
     "dotenv": "8.5.1",
     "execa": "^1.0.0",
     "fast-deep-equal": "3.1.3",
-    "file-loader": "6.2.0",
     "font-awesome": "^4.7.0",
     "formik": "^2.2.6",
     "fs-extra": "^9.1.0",
@@ -131,7 +130,6 @@
     "style-loader": "2.0.0",
     "styled-components": "^5.2.3",
     "terser-webpack-plugin": "4.2.3",
-    "url-loader": "4.1.1",
     "webpack": "5.36.2",
     "webpack-cli": "4.9.1",
     "webpack-dev-server": "4.5.0",

packages/core/admin/webpack.config.js

@@ -144,13 +144,15 @@ module.exports = ({
         },
         {
           test: /\.(svg|eot|otf|ttf|woff|woff2)$/,
-          use: 'file-loader',
+          type: 'asset/resource',
         },
         {
           test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.ico$/],
-          loader: require.resolve('url-loader'),
+          type: 'asset',
-          options: {
+          parser: {
-            limit: 1000,
+            dataUrlCondition: {
+              maxSize: 1000,
+            },
           },
         },
         {
@@ -160,9 +162,11 @@ module.exports = ({
         },
         {
           test: /\.(mp4|webm)$/,
-          loader: require.resolve('url-loader'),
+          type: 'asset',
-          options: {
+          parser: {
-            limit: 10000,
+            dataUrlCondition: {
+              maxSize: 10000,
+            },
           },
         },
       ],

packages/core/helper-plugin/package.json

@@ -51,6 +51,7 @@
     "invariant": "^2.2.1",
     "lodash": "4.17.21",
     "match-sorter": "^4.0.2",
+    "mini-css-extract-plugin": "2.4.4",
     "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

packages/core/helper-plugin/webpack.config.js

@@ -41,9 +41,11 @@ module.exports = {
 
       {
         test: /\.(png|svg|jpg|gif)$/,
-        loader: 'url-loader',
+        type: 'asset',
-        options: {
+        parser: {
-          limit: 8192,
+          dataUrlCondition: {
+            maxSize: 8192,
+          },
         },
       },
     ],

yarn.lock

@@ -10506,7 +10506,7 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
-file-loader@6.2.0, file-loader@^6.2.0:
+file-loader@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
   integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
@@ -21939,7 +21939,7 @@ url-join@4.0.1, url-join@^4.0.0:
   resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.1.tgz#b642e21a2646808ffa178c4c5fda39844e12cde7"
   integrity sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==
 
-url-loader@4.1.1, url-loader@^4.1.1:
+url-loader@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
   integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==