Skip to content

Commit 687b4f9

Browse files
committed
docs(readme): add examples for optional tag
1 parent 64fda8d commit 687b4f9

File tree

1 file changed

+62
-3
lines changed

1 file changed

+62
-3
lines changed

README.md

Lines changed: 62 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,68 @@ module.exports = {
241241

242242
If the tag name is not specified it will process all the tags.
243243

244-
> ⚠ You must specify the tag name if using `...` to extend the default sources list
244+
**Note:** source with a `tag` option takes precedence over source without.
245+
246+
For example, to process `data-src` attributes on _all_ tags, omit the tag name:
247+
248+
**webpack.config.js**
249+
250+
```js
251+
module.exports = {
252+
module: {
253+
rules: [
254+
{
255+
test: /\.html$/i,
256+
loader: "html-loader",
257+
options: {
258+
sources: {
259+
list: [
260+
{
261+
attribute: "data-src",
262+
type: "src",
263+
},
264+
],
265+
},
266+
},
267+
},
268+
],
269+
},
270+
};
271+
```
272+
273+
> ⚠ You **must** specify a tag name if using `...` to extend attributes for tags already in the default sources list
274+
275+
For example, to extend the default source list so that it also processes `data-src` attributes on _all_ tags, you might be tempted to do this:
276+
277+
```js
278+
module.exports = {
279+
module: {
280+
rules: [
281+
{
282+
test: /\.html$/i,
283+
loader: "html-loader",
284+
options: {
285+
sources: {
286+
list: [
287+
// All default supported tags and attributes
288+
"...",
289+
{
290+
attribute: "data-src",
291+
type: "src",
292+
},
293+
],
294+
},
295+
},
296+
},
297+
],
298+
},
299+
};
300+
```
301+
302+
However this will only process `data-src` attributes on tags that _aren't in the default list_:
303+
304+
- `<p data-src="..">` will be processed, as `p` is not in the default sources list
305+
- `<img data-src="..">` won't be processed, as `img` is already in the default sources list
245306

246307
> You can use your custom filter to specify html elements to be processed.
247308
@@ -322,8 +383,6 @@ module.exports = {
322383
};
323384
```
324385

325-
**Note:** source with a `tag` option takes precedence over source without.
326-
327386
Filter can be used to disable default sources.
328387

329388
For example:

0 commit comments

Comments
 (0)