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

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-src2x="image2x.png" >

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

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

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

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

License

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