test: use asset modules (#3771)

Author: snitin315

examples/default/webpack.config.js

@@ -1,9 +1,28 @@
 "use strict";
 
+const { version } = require("webpack");
 // our setup function adds behind-the-scenes bits to the config that all of our
 // examples need
 const { setup } = require("../util");
 
+let moduleRuleForPNG = {};
+
+if (version.startsWith("5")) {
+  moduleRuleForPNG = {
+    test: /\.png$/,
+    type: "asset/resource",
+    generator: {
+      filename: "images/[hash][ext][query]",
+    },
+  };
+} else {
+  moduleRuleForPNG = {
+    test: /\.png$/,
+    loader: "file-loader",
+    options: { prefix: "img/" },
+  };
+}
+
 module.exports = setup({
   context: __dirname,
   entry: "./app.js",
@@ -14,9 +33,7 @@ module.exports = setup({
         use: ["style-loader", "css-loader", "less-loader"],
       },
       {
-        test: /\.png$/,
-        loader: "file-loader",
-        options: { prefix: "img/" },
+        ...moduleRuleForPNG,
       },
     ],
   },

examples/general/config-array/webpack.config.js

@@ -1,9 +1,30 @@
 "use strict";
 
+const { version } = require("webpack");
 // our setup function adds behind-the-scenes bits to the config that all of our
 // examples need
 const { setup } = require("../../util");
 
+const isWebpack5 = version.startsWith("5");
+
+let moduleRuleForPNG = {};
+
+if (isWebpack5) {
+  moduleRuleForPNG = {
+    test: /\.png$/,
+    type: "asset/resource",
+    generator: {
+      filename: "images/[hash][ext][query]",
+    },
+  };
+} else {
+  moduleRuleForPNG = {
+    test: /\.png$/,
+    loader: "file-loader",
+    options: { prefix: "img/" },
+  };
+}
+
 module.exports = [
   setup({
     context: __dirname,
@@ -15,9 +36,7 @@ module.exports = [
           use: ["style-loader", "css-loader", "less-loader"],
         },
         {
-          test: /\.png$/,
-          loader: "file-loader",
-          options: { prefix: "img/" },
+          ...moduleRuleForPNG,
         },
       ],
     },
@@ -34,11 +53,19 @@ module.exports = [
           test: /\.less$/,
           use: ["style-loader", "css-loader", "less-loader"],
         },
-        {
-          test: /\.png$/,
-          loader: "url-loader",
-          options: { limit: 100000 },
-        },
+        isWebpack5
+          ? {
+              test: /\.png$/,
+              type: "asset/resource",
+              generator: {
+                filename: "images/[hash][ext][query]",
+              },
+            }
+          : {
+              test: /\.png$/,
+              loader: "url-loader",
+              options: { limit: 100000 },
+            },
       ],
     },
     optimization: {

test/fixtures/historyapifallback-3-config/webpack.config.js

@@ -1,5 +1,25 @@
 "use strict";
 
+const { version } = require("webpack");
+
+let moduleRuleForHTML = {};
+
+if (version.startsWith("5")) {
+  moduleRuleForHTML = {
+    test: /\.html$/,
+    type: "asset/resource",
+    generator: {
+      filename: "index.html",
+    },
+  };
+} else {
+  moduleRuleForHTML = {
+    test: /\.html$/,
+    loader: "file-loader",
+    options: { name: "index.html" },
+  };
+}
+
 module.exports = {
   mode: "development",
   context: __dirname,
@@ -11,9 +31,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.html$/,
-        loader: "file-loader",
-        options: { name: "index.html" },
+        ...moduleRuleForHTML,
       },
     ],
   },

test/fixtures/historyapifallback-config/webpack.config.js

@@ -1,5 +1,25 @@
 "use strict";
 
+const { version } = require("webpack");
+
+let moduleRuleForHTML = {};
+
+if (version.startsWith("5")) {
+  moduleRuleForHTML = {
+    test: /\.html$/,
+    type: "asset/resource",
+    generator: {
+      filename: "[name][ext]",
+    },
+  };
+} else {
+  moduleRuleForHTML = {
+    test: /\.html$/,
+    loader: "file-loader",
+    options: { name: "[name].[ext]" },
+  };
+}
+
 module.exports = {
   mode: "development",
   context: __dirname,
@@ -11,9 +31,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.html$/,
-        loader: "file-loader",
-        options: { name: "[name].[ext]" },
+        ...moduleRuleForHTML,
       },
     ],
   },

test/fixtures/mime-types-config/webpack.config.js

@@ -1,5 +1,33 @@
 "use strict";
 
+const { version } = require("webpack");
+
+let moduleRuleForCustom = {};
+
+if (version.startsWith("5")) {
+  moduleRuleForCustom = {
+    test: /\.custom$/,
+    type: "asset/resource",
+    generator: {
+      filename: "[name][ext]",
+    },
+  };
+} else {
+  moduleRuleForCustom = {
+    test: /\.custom$/,
+    use: [
+      {
+        loader: "file-loader",
+        options: {
+          name() {
+            return "[name].[ext]";
+          },
+        },
+      },
+    ],
+  };
+}
+
 module.exports = {
   mode: "development",
   context: __dirname,
@@ -15,17 +43,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.custom$/,
-        use: [
-          {
-            loader: "file-loader",
-            options: {
-              name() {
-                return "[name].[ext]";
-              },
-            },
-          },
-        ],
+        ...moduleRuleForCustom,
       },
     ],
   },

test/fixtures/multi-public-path-config/webpack.config.js

@@ -1,6 +1,25 @@
 "use strict";
 
 const path = require("path");
+const { version } = require("webpack");
+
+let moduleRuleForHTML = {};
+
+if (version.startsWith("5")) {
+  moduleRuleForHTML = {
+    test: /\.html$/,
+    type: "asset/resource",
+    generator: {
+      filename: "path/to/file.html",
+    },
+  };
+} else {
+  moduleRuleForHTML = {
+    test: /\.html$/,
+    loader: "file-loader",
+    options: { name: "path/to/file.html" },
+  };
+}
 
 module.exports = [
   {
@@ -19,11 +38,7 @@ module.exports = [
     module: {
       rules: [
         {
-          test: /\.html$/,
-          loader: "file-loader",
-          options: {
-            name: "path/to/file.html",
-          },
+          ...moduleRuleForHTML,
         },
       ],
     },