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 asset modules).
Supported tags and attributes:
the src attribute of the audio tag
the src attribute of the embed tag
the src attribute of the img tag
the srcset attribute of the img tag
the src attribute of the input tag
the data attribute of the object tag
the src attribute of the script tag
the href attribute of the script tag
the xlink:href attribute of the script tag
the src attribute of the source tag
the srcset attribute of the source tag
the src attribute of the track tag
the poster attribute of the video tag
the src attribute of the video tag
the xlink:href attribute of the image tag
the href attribute of the image tag
the xlink:href attribute of the use tag
the href attribute of the use tag
the href attribute of the link tag when the rel attribute contains stylesheet, icon, shortcut icon, mask-icon, apple-touch-icon, apple-touch-icon-precomposed, apple-touch-startup-image, manifest, prefetch, preload or when the itemprop attribute is image, logo, screenshot, thumbnailurl, contenturl, downloadurl, duringmedia, embedurl, installurl, layoutimage
the imagesrcset attribute of the link tag when the rel attribute contains stylesheet, icon, shortcut icon, mask-icon, apple-touch-icon, apple-touch-icon-precomposed, apple-touch-startup-image, manifest, prefetch, preload
the content attribute of the meta tag when the name attribute is msapplication-tileimage, msapplication-square70x70logo, msapplication-square150x150logo, msapplication-wide310x150logo, msapplication-square310x310logo, msapplication-config, twitter:image or when the property attribute is og:image, og:image:url, og:image:secure_url, og:audio, og:audio:secure_url, og:video, og:video:secure_url, vk:image or when the itemprop attribute is image, logo, screenshot, thumbnailurl, contenturl, downloadurl, duringmedia, embedurl, installurl, layoutimage
the icon-uri value component in content attribute of the meta tag when the name attribute is msapplication-task
boolean
The true value enables processing of all default elements and attributes, the false disable processing of all attributes.
Allows you to specify which tags and attributes to process, filter them, filter urls and process sources starts with /.
For example:
webpack.config.js
module.exports={module: {rules: [{test: /\.html$/i,loader: "html-loader",options: {sources: {list: [// All default supported tags and attributes"...",{tag: "img",attribute: "data-src",type: "src",},{tag: "img",attribute: "data-srcset",type: "srcset",},],urlFilter: (attribute,value,resourcePath)=>{// The `attribute` argument contains a name of the HTML attribute.// The `value` argument contains a value of the HTML attribute.// The `resourcePath` argument contains a path to the loaded HTML file.if(/example\.pdf$/.test(value)){returnfalse;}returntrue;},},},},],},};
module.exports={module: {rules: [{test: /\.html$/i,loader: "html-loader",options: {sources: {list: [// All default supported tags and attributes"...",{tag: "img",attribute: "data-src",type: "src",},{tag: "img",attribute: "data-srcset",type: "srcset",},{// Tag nametag: "link",// Attribute nameattribute: "href",// Type of processing, can be `src` or `scrset`type: "src",// Allow to filter some attributesfilter: (tag,attribute,attributes,resourcePath)=>{// The `tag` argument contains a name of the HTML tag.// The `attribute` argument contains a name of the HTML attribute.// The `attributes` argument contains all attributes of the tag.// The `resourcePath` argument contains a path to the loaded HTML file.if(/my-html\.html$/.test(resourcePath)){returnfalse;}if(!/stylesheet/i.test(attributes.rel)){returnfalse;}if(attributes.type&&attributes.type.trim().toLowerCase()!=="text/css"){returnfalse;}returntrue;},},],},},},],},};
If the tag name is not specified it will process all the tags.
You can use your custom filter to specify html elements to be processed.
For example:
webpack.config.js
module.exports={module: {rules: [{test: /\.html$/i,loader: "html-loader",options: {sources: {list: [{// Attribute nameattribute: "src",// Type of processing, can be `src` or `scrset`type: "src",// Allow to filter some attributes (optional)filter: (tag,attribute,attributes,resourcePath)=>{// The `tag` argument contains a name of the HTML tag.// The `attribute` argument contains a name of the HTML attribute.// The `attributes` argument contains all attributes of the tag.// The `resourcePath` argument contains a path to the loaded HTML file.// choose all HTML tags except img tagreturntag.toLowerCase()!=="img";},},],},},},],},};
Filter can also be used to extend the supported elements and attributes.
For example, filter can help process meta tags that reference assets:
Allow to filter urls. All filtered urls will not be resolved (left in the code as they were written).
All non requestable sources (for example <img src="javascript:void(0)">) do not handle by default.
module.exports={module: {rules: [{test: /\.html$/i,loader: "html-loader",options: {sources: {urlFilter: (attribute,value,resourcePath)=>{// The `attribute` argument contains a name of the HTML attribute.// The `value` argument contains a value of the HTML attribute.// The `resourcePath` argument contains a path to the loaded HTML file.if(/example\.pdf$/.test(value)){returnfalse;}returntrue;},},},},],},};