Skip to content

Commit 3ddf5dc

Browse files
cap-Bernarditocap-Bernardito
authored
docs: removed file-loader and url-loader in favor asset modules (#350)
1 parent e97d3c8 commit 3ddf5dc

File tree

10 files changed

+109
-145
lines changed

10 files changed

+109
-145
lines changed

‎README.md

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ Type: `Boolean|Object`
6363
Default: `true`
6464

6565
By default every loadable attributes (for example - `<img src="image.png">`) is imported (`const img = require('./image.png')` or `import img from "./image.png""`).
66-
You may need to specify loaders for images in your configuration (recommended `file-loader` or `url-loader`).
66+
You may need to specify loaders for images in your configuration (recommended [`asset modules`](https://webpack.js.org/guides/asset-modules/)).
6767

6868
Supported tags and attributes:
6969

@@ -569,7 +569,7 @@ module.exports = {
569569
},
570570
{
571571
test: /\.jpg$/,
572-
loader: 'file-loader',
572+
type: 'asset/resource',
573573
},
574574
],
575575
},
@@ -597,8 +597,14 @@ module.exports = {
597597
module.exports = {
598598
module: {
599599
rules: [
600-
{ test: /\.jpg$/, loader: 'file-loader' },
601-
{ test: /\.png$/, loader: 'url-loader' },
600+
{
601+
test: /\.jpg$/,
602+
type: 'asset/resource',
603+
},
604+
{
605+
test: /\.png$/,
606+
type: 'asset/inline',
607+
},
602608
],
603609
},
604610
output: {
@@ -680,9 +686,16 @@ a {
680686
module.exports = {
681687
module: {
682688
rules: [
689+
{
690+
test: /\.html$/,
691+
type: 'asset/resource',
692+
generator: {
693+
filename: '[name][ext]',
694+
},
695+
},
683696
{
684697
test: /\.html$/i,
685-
use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],
698+
use: ['extract-loader', 'html-loader'],
686699
},
687700
{
688701
test: /\.js$/i,
@@ -691,7 +704,7 @@ module.exports = {
691704
},
692705
{
693706
test: /\.file.js$/i,
694-
loader: 'file-loader',
707+
type: 'asset/resource',
695708
},
696709
{
697710
test: /\.css$/i,
@@ -700,7 +713,7 @@ module.exports = {
700713
},
701714
{
702715
test: /\.file.css$/i,
703-
loader: 'file-loader',
716+
type: 'asset/resource',
704717
},
705718
],
706719
},
@@ -802,26 +815,37 @@ module.exports = {
802815

803816
A very common scenario is exporting the HTML into their own _.html_ file, to
804817
serve them directly instead of injecting with javascript. This can be achieved
805-
with a combination of 3 loaders:
818+
with a combination of 2 loaders:
806819

807-
- [file-loader](https://github.com/webpack/file-loader)
808820
- [extract-loader](https://github.com/peerigon/extract-loader)
809821
- html-loader
810822

823+
and [`asset modules`](https://webpack.js.org/guides/asset-modules/)
824+
811825
The html-loader will parse the URLs, require the images and everything you
812826
expect. The extract loader will parse the javascript back into a proper html
813-
file, ensuring images are required and point to proper path, and the file loader
827+
file, ensuring images are required and point to proper path, and the [`asset modules`](https://webpack.js.org/guides/asset-modules/)
814828
will write the _.html_ file for you. Example:
815829

816830
**webpack.config.js**
817831

818832
```js
819833
module.exports = {
834+
output: {
835+
assetModuleFilename: '[name][ext]',
836+
},
820837
module: {
821838
rules: [
839+
{
840+
test: /\.html$/,
841+
type: 'asset/resource',
842+
generator: {
843+
filename: '[name][ext]',
844+
},
845+
},
822846
{
823847
test: /\.html$/i,
824-
use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],
848+
use: ['extract-loader', 'html-loader'],
825849
},
826850
],
827851
},

‎package-lock.json

Lines changed: 12 additions & 81 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@
6262
"eslint": "^7.19.0",
6363
"eslint-config-prettier": "^7.2.0",
6464
"eslint-plugin-import": "^2.22.1",
65-
"file-loader": "^6.2.0",
6665
"handlebars": "^4.7.6",
6766
"husky": "^4.3.8",
6867
"jest": "^26.6.3",
@@ -74,8 +73,7 @@
7473
"prettier": "^2.1.2",
7574
"standard-version": "^9.0.0",
7675
"unescape-unicode": "^0.2.0",
77-
"url-loader": "^4.1.1",
78-
"webpack": "^5.19.0"
76+
"webpack": "^5.21.2"
7977
},
8078
"keywords": [
8179
"webpack",

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
2121
import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
2222
import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
2323
import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
24-
import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
24+
import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
2525
import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
2626
import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
2727
import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";
@@ -500,7 +500,7 @@ var ___HTML_LOADER_IMPORT_12___ = require(\\"./module.file.js\\");
500500
var ___HTML_LOADER_IMPORT_13___ = require(\\"./fallback.file.js\\");
501501
var ___HTML_LOADER_IMPORT_14___ = require(\\"aliasImageWithSpace\\");
502502
var ___HTML_LOADER_IMPORT_15___ = require(\\"./webpack.svg\\");
503-
var ___HTML_LOADER_IMPORT_16___ = require(\\"!!url-loader!./pixel.png\\");
503+
var ___HTML_LOADER_IMPORT_16___ = require(\\"./pixel.png?url\\");
504504
var ___HTML_LOADER_IMPORT_17___ = require(\\"./site.webmanifest\\");
505505
var ___HTML_LOADER_IMPORT_18___ = require(\\"./browserconfig.xml\\");
506506
var ___HTML_LOADER_IMPORT_19___ = require(\\"./sound.mp3\\");
@@ -979,7 +979,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
979979
import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
980980
import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
981981
import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
982-
import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
982+
import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
983983
import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
984984
import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
985985
import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";

‎test/__snapshots__/loader.test.js.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
173173
import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
174174
import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
175175
import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
176-
import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
176+
import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
177177
import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
178178
import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
179179
import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
2121
import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
2222
import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
2323
import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
24-
import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
24+
import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
2525
import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
2626
import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
2727
import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";
@@ -500,7 +500,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
500500
import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
501501
import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
502502
import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
503-
import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
503+
import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
504504
import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
505505
import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
506506
import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";
@@ -979,7 +979,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
979979
import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
980980
import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
981981
import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
982-
import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
982+
import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
983983
import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
984984
import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
985985
import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";
@@ -1084,7 +1084,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
10841084
import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
10851085
import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
10861086
import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
1087-
import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
1087+
import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
10881088
import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
10891089
import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
10901090
import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";
@@ -1563,7 +1563,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
15631563
import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
15641564
import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
15651565
import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
1566-
import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
1566+
import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
15671567
import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
15681568
import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
15691569
import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";
@@ -1651,7 +1651,7 @@ import ___HTML_LOADER_IMPORT_12___ from \\"./module.file.js\\";
16511651
import ___HTML_LOADER_IMPORT_13___ from \\"./fallback.file.js\\";
16521652
import ___HTML_LOADER_IMPORT_14___ from \\"aliasImageWithSpace\\";
16531653
import ___HTML_LOADER_IMPORT_15___ from \\"./webpack.svg\\";
1654-
import ___HTML_LOADER_IMPORT_16___ from \\"!!url-loader!./pixel.png\\";
1654+
import ___HTML_LOADER_IMPORT_16___ from \\"./pixel.png?url\\";
16551655
import ___HTML_LOADER_IMPORT_17___ from \\"./site.webmanifest\\";
16561656
import ___HTML_LOADER_IMPORT_18___ from \\"./browserconfig.xml\\";
16571657
import ___HTML_LOADER_IMPORT_19___ from \\"./sound.mp3\\";

‎test/__snapshots__/sources-option.test.js.snap

Lines changed: 16 additions & 16 deletions
Large diffs are not rendered by default.

‎test/fixtures/simple.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -323,12 +323,12 @@ <h2>An Ordered HTML List</h2>
323323

324324
<button onclick=" document.getElementById('demo').innerHTML = Date()">The time is?</button>
325325

326-
<img src="!!url-loader!./pixel.png" alt="" />
326+
<img src="./pixel.png?url" alt="" />
327327

328328
<img src="
329329
330330
331-
!!url-loader!./pixel.png
331+
./pixel.png?url
332332
333333
334334
" alt="" />

0 commit comments

Comments
 (0)