docs: removed file-loader and url-loader favor asset modules

README.md

@@ -63,7 +63,7 @@ Type: `Boolean|Object`
 Default: `true`
 
 By default every loadable attributes (for example - `<img src="image.png">`) is imported (`const img = require('./image.png')` or `import img from "./image.png""`).
-You may need to specify loaders for images in your configuration (recommended `file-loader` or `url-loader`).
+You may need to specify loaders for images in your configuration (recommended [`asset modules`](https://webpack.js.org/guides/asset-modules/)).
 
 Supported tags and attributes:
 
@@ -569,7 +569,7 @@ module.exports = {
       },
       {
         test: /\.jpg$/,
-        loader: 'file-loader',
+        type: 'asset/resource',
       },
     ],
   },
@@ -597,8 +597,14 @@ module.exports = {
 module.exports = {
   module: {
     rules: [
-      { test: /\.jpg$/, loader: 'file-loader' },
-      { test: /\.png$/, loader: 'url-loader' },
+      {
+        test: /\.jpg$/,
+        type: 'asset/resource',
+      },
+      {
+        test: /\.png$/,
+        type: 'asset/inline',
+      },
     ],
   },
   output: {
@@ -680,9 +686,16 @@ a {
 module.exports = {
   module: {
     rules: [
+      {
+        test: /\.html$/,
+        type: 'asset/resource',
+        generator: {
+          filename: '[name][ext]',
+        },
+      },
       {
         test: /\.html$/i,
-        use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],
+        use: ['extract-loader', 'html-loader'],
       },
       {
         test: /\.js$/i,
@@ -691,7 +704,7 @@ module.exports = {
       },
       {
         test: /\.file.js$/i,
-        loader: 'file-loader',
+        type: 'asset/resource',
       },
       {
         test: /\.css$/i,
@@ -700,7 +713,7 @@ module.exports = {
       },
       {
         test: /\.file.css$/i,
-        loader: 'file-loader',
+        type: 'asset/resource',
       },
     ],
   },
@@ -802,26 +815,37 @@ module.exports = {
 
 A very common scenario is exporting the HTML into their own _.html_ file, to
 serve them directly instead of injecting with javascript. This can be achieved
-with a combination of 3 loaders:
+with a combination of 2 loaders:
 
-- [file-loader](https://github.com/webpack/file-loader)
 - [extract-loader](https://github.com/peerigon/extract-loader)
 - html-loader
 
+and [`asset modules`](https://webpack.js.org/guides/asset-modules/)
+
 The html-loader will parse the URLs, require the images and everything you
 expect. The extract loader will parse the javascript back into a proper html
-file, ensuring images are required and point to proper path, and the file loader
+file, ensuring images are required and point to proper path, and the [`asset modules`](https://webpack.js.org/guides/asset-modules/)
 will write the _.html_ file for you. Example:
 
 **webpack.config.js**
 
 ```js
 module.exports = {
+  output: {
+    assetModuleFilename: '[name][ext]',
+  },
   module: {
     rules: [
+      {
+        test: /\.html$/,
+        type: 'asset/resource',
+        generator: {
+          filename: '[name][ext]',
+        },
+      },
       {
         test: /\.html$/i,
-        use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],
+        use: ['extract-loader', 'html-loader'],
       },
     ],
   },

package.json

@@ -62,7 +62,6 @@
     "eslint": "^7.19.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-import": "^2.22.1",
-    "file-loader": "^6.2.0",
     "handlebars": "^4.7.6",
     "husky": "^4.3.8",
     "jest": "^26.6.3",
@@ -74,8 +73,7 @@
     "prettier": "^2.1.2",
     "standard-version": "^9.0.0",
     "unescape-unicode": "^0.2.0",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.19.0"
+    "webpack": "^5.21.2"
   },
   "keywords": [
     "webpack",

test/__snapshots__/esModule-option.test.js.snap

@@ -21,7 +21,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
 import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
 import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
 import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
-import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
+import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
 import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
 import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
 import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";
@@ -500,7 +500,7 @@ var ___HTML_LOADER_IMPORT_12___ = require(\\"./module.file.js\\");
 var ___HTML_LOADER_IMPORT_13___ = require(\\"./fallback.file.js\\");
 var ___HTML_LOADER_IMPORT_14___ = require(\\"aliasImageWithSpace\\");
 var ___HTML_LOADER_IMPORT_15___ = require(\\"./webpack.svg\\");
-var ___HTML_LOADER_IMPORT_16___ = require(\\"!!url-loader!./pixel.png\\");
+var ___HTML_LOADER_IMPORT_16___ = require(\\"./pixel.png?url\\");
 var ___HTML_LOADER_IMPORT_17___ = require(\\"./site.webmanifest\\");
 var ___HTML_LOADER_IMPORT_18___ = require(\\"./browserconfig.xml\\");
 var ___HTML_LOADER_IMPORT_19___ = require(\\"./sound.mp3\\");
@@ -979,7 +979,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
 import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
 import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
 import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
-import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
+import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
 import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
 import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
 import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";

test/__snapshots__/loader.test.js.snap

@@ -156,7 +156,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
 import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
 import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
 import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
-import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
+import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
 import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
 import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
 import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";

test/__snapshots__/minimize-option.test.js.snap

@@ -21,7 +21,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
 import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
 import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
 import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
-import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
+import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
 import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
 import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
 import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";
@@ -500,7 +500,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
 import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
 import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
 import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
-import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
+import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
 import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
 import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
 import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";
@@ -979,7 +979,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
 import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
 import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
 import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
-import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
+import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
 import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
 import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
 import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";
@@ -1084,7 +1084,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
 import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
 import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
 import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
-import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
+import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
 import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
 import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
 import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";
@@ -1563,7 +1563,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
 import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
 import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
 import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
-import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
+import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
 import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
 import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
 import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";
@@ -1651,7 +1651,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
 import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
 import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
 import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
-import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
+import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
 import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
 import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
 import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";

test/fixtures/simple.html

@@ -323,12 +323,12 @@ <h2>An Ordered HTML List</h2>
 
 <button onclick="   document.getElementById('demo').innerHTML    =    Date()">The time is?</button>
 
-<img src="!!url-loader!./pixel.png" alt="" />
+<img src="./pixel.png?url" alt="" />
 
 <img src="
 
 
-!!url-loader!./pixel.png
+./pixel.png?url
 
 
 " alt="" />