html-loader

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).

README

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)

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]/"
	}
}

<!-- fileA.html -->
<img  src="image.jpg"  data-src="image2x.png" >

require("html!./fileA.html");
// => '<img  src="http://cdn.example.com/49e...ba9f/a9f...92ca.jpg"  data-src="image2x.png" >'

require("html?attrs=img:data-src!./file.html");
// => '<img  src="image.png"  data-src="data:image/png;base64,..." >'

require("html?attrs=img:src img:data-src!./file.html");
require("html?attrs[]=img:src&attrs[]=img:data-src!./file.html");
// => '<img  src="http://cdn.example.com/49e...ba9f/a9f...92ca.jpg"  data-src="data:image/png;base64,..." >'

/// minimized by running `webpack --optimize-minimize`
// => '<img src=http://cdn.example.com/49e...ba9f/a9f...92ca.jpg data-src=data:image/png;base64,...>'

'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:

<!-- fileB.html -->
<img src="/image.jpg">

require("html!./fileB.html");
// => '<img  src="/image.jpg">'

require("html?root=.!./fileB.html");
// => '<img  src="http://cdn.example.com/49e...ba9f/a9f...92ca.jpg">'

License

MIT (http://www.opensource.org/licenses/mit-license.php)