See: webpack-contrib/html-loader#405
This repository is intended to demonstrate a possible bug (or documentation error) when using html-loader and extending the default sources with a custom option.sources.list.
According to the README, the documentation for options.sources.list makes the following two statements:
Using
"..."syntax allows you to extend default supported tags and attributes.
and...
If the tag name is not specified it will process all the tags.
This implies that the two loader configs below should be equivalent:
<html>
<body>
<img my-custom-src="./puppy.jpeg">
</body>
</html>// Version 1: Without `tag'
options: {
sources: {
list: [
"...",
{ attribute: "my-custom-src", type: "src" }
]
}// Version 2: With `tag`
options: {
sources: {
list: [
"...",
{ tag: "img", attribute: "my-custom-src", type: "src" }
]
}According to the documentation, both of the configs above should process the my-custom-src attribute of the <img> tag, and the cute puppy image should be included in the final bundle.
When tag: "img" is not specified, the custom attribute is not processed.
When tag: "img" is specified, the custom attribute is processed.
I looked at the tests, and sure enough there is an existing test for:
it("should handle all src sources in all HTML tags when tag is undefined")However, what I discovered is that this test doesn't use the "..." option to extend the default sources.
In fact, all existing tests that do use "..." also explicitly specify a tag for the overrides.
There are no tests where "..." is specified and a custom attribute without a tag is used.
If we remove "..." from our config, then both versions of the config do work as expected.
- Clone this repository (
git clone https://github.com/scottohara/webpack-html-loader-custom-source.git) - Change into the directory (
cd webpack-html-loader-custom-source) - Install dependencies (
npm install) - Bundle (
webpack) - Inspect the contents of
/distand note the following:- There is no
*.jpegfile present - The
index.htmlmodule inmain.jsstill has the original<img my-custom-src="./puppy.jpeg">markup - The
console.log()statement in thefilter()does not appear anywhere in the CLI output
- There is no
- Uncomment
tag: "img"(line 20 inwebpack.config.js) - Bundle (
webpack) - Inspect the contents of
/distand note the following:- There is a
*.jpegfile present - There is a
puppy.jpegmodule in themain.jsbundle - The
index.htmlmodule inmain.jsnow loads thepuppy.jpegmodule - The
console.log()statement in thefilter()appears in the CLI output
- There is a
- Remove the
"..."(line 18 inwebpack.config.js) - Repeat steps 4-8 (with/without
tag: "img"), and obverse that both work as expected.
Either:
- The
READMEshould be updated to indicate that if"..."is used,tagmust be specified, or - The code should be fixed to allow
tagto be omitted when using"..."