What is html-loader?
The html-loader npm package is used to export HTML as string. When used with webpack, it allows you to require HTML files as modules. It can also minimize the HTML when the webpack 'minimize' option is enabled. It's useful for processing HTML files to include them as part of your JavaScript bundle.
What are html-loader's main functionalities?
Export HTML as String
Allows you to use HTML files as modules by exporting them as strings. This can be useful when you want to include your HTML in your JavaScript files.
require('html-loader!./file.html')
Interpolate Custom Syntax
Enables interpolation with a custom syntax within the HTML file. This is useful for including images or other assets using a require statement.
require('html-loader?interpolate=require!./file.html')
Minimize HTML
When used with webpack, you can minimize the HTML by setting the 'minimize' option to true. This helps reduce the size of the HTML included in your JavaScript bundle.
module.exports = { module: { rules: [{ test: /\.html$/, use: [{ loader: 'html-loader', options: { minimize: true } }] }] } }
Other packages similar to html-loader
raw-loader
The raw-loader package is similar to html-loader in that it allows you to import files as a string. However, it does not specifically target HTML files and does not have HTML-specific features like minimizing.
handlebars-loader
The handlebars-loader is used for compiling Handlebars templates and includes them in the webpack bundle. It's similar to html-loader but is tailored for Handlebars template syntax.
pug-loader
The pug-loader package allows you to compile Pug templates and include them in your webpack bundle. It's similar to html-loader but is designed for the Pug templating engine (formerly known as Jade).
html loader for webpack
Exports HTML as string. HTML is minimized when the compiler demands.
By default every local <img src="image.png">
is required (require("./image.png")
). You may need to specify loaders for images in your configuration (recommended file-loader
or url-loader
).
You can specify which tag-attribute combination should be processed by this loader via the query parameter attrs
. Pass an array or a space-separated list of <tag>:<attribute>
combinations. (Default: attrs=img:src
)
To completely disable tag-attribute processing (for instance, if you're handling image loading on the client side) you can pass in attrs=false
.
Usage
Documentation: Using loaders
Examples
With this configuration:
{
module: { loaders: [
{ test: /\.jpg$/, loader: "file-loader" },
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }
]},
output: {
publicPath: "http://cdn.example.com/[hash]/"
}
}
<img src="image.jpg" data-src="image2x.png" >
require("html!./fileA.html");
require("html?attrs=img:data-src!./file.html");
require("html?attrs=img:src img:data-src!./file.html");
require("html?attrs[]=img:src&attrs[]=img:data-src!./file.html");
require("html?-attrs!./file.html");
'Root-relative' urls
For urls that start with a /
, the default behavior is to not translate them.
If a root
query parameter is set, however, it will be prepended to the url
and then translated.
With the same configuration above:
<img src="/image.jpg">
require("html!./fileB.html");
require("html?root=.!./fileB.html");
Interpolation
You can use interpolate
flag to enable interpolation syntax for ES6 template strings, like so:
require("html?interpolate!./file.html");
<img src="${require(`./images/gallery.png`)}" />
<div>${require('./partials/gallery.html')}</div>
Advanced options
If you need to pass more advanced options, especially those which cannot be stringified, you can also define an htmlLoader
-property on your webpack.config.js
:
module.exports = {
...
module: {
loaders: [
{
test: /\.html$/,
loader: "html"
}
]
}
htmlLoader: {
ignoreCustomFragments: [/\{\{.*?}}/]
}
};
If you need to define two different loader configs, you can also change the config's property name via html?config=otherHtmlLoaderConfig
:
module.exports = {
...
module: {
loaders: [
{
test: /\.html$/,
loader: "html?config=otherHtmlLoaderConfig"
}
]
}
otherHtmlLoaderConfig: {
...
}
};
License
MIT (http://www.opensource.org/licenses/mit-license.php)