html-loader

library5.1.0jsnpmunverified

Webpack loader that exports HTML as a string, automatically resolving and processing references to assets like images, scripts, and stylesheets. Current stable release is v5.1.0 (July 2024), with breaking changes in v5.0.0 (Node.js >=18.12.0 required) and v4.0.0 (Node.js >=14.15.0, updated parse5). Key differentiators: supports sources configuration for custom tag/attribute handling, preprocessor and postprocessor hooks, and integrates with webpack's asset modules. Actively maintained under webpack-contrib, with frequent updates and community support.

web-framework data

github ↗package ↗

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

No JavaScript symbol is exported; use as a webpack loader string.

module.exports = { module: { rules: [ { test: /\.html$/i, loader: 'html-loader' } ] } };

ESM import is valid for webpack config files using ESM, but the loader is used as a string in rules.

import HtmlLoader from 'html-loader';

CommonJS require works in webpack config; the loader can be referenced as a string.

const HtmlLoader = require('html-loader');

Configures html-loader in webpack to process HTML files, resolve image sources, and minimize output.

// webpack.config.js const path = require('path'); module.exports = { mode: 'production', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ { test: /\.html$/i, loader: 'html-loader', options: { sources: { list: [ { tag: 'img', attribute: 'src', type: 'src', }, ], urlFilter: (attribute, value, resourcePath) => { // Only process .png files return /\.png$/i.test(value); }, }, minimize: true, }, }, ], }, };

Debug

Known footguns

breakingMinimum Node.js version changed to 18.12.0 in v5.0.0

breakingMinimum Node.js version changed to 14.15.0 in v4.0.0

breakingparse5 updated to v7.0.0 in v4.0.0, may cause different parsing behavior

deprecatedThe 'interpolate' option was removed in v3.0.0; use 'preprocessor' instead

gotchaBy default, html-loader imports all loadable asset attributes (e.g., img src). Ensure you have appropriate loaders for those assets, such as asset modules.

gotchaWhen using 'sources.urlFilter', the filter function receives the attribute name, value, and resource path. Remember that the 'value' may be a relative path. Use resourcePath to resolve correctly.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

0 hits · last 30 days

No traffic data recorded yet.

Resources

githubhttps://github.com/webpack-contrib/html-loader ↗

packagehttps://www.npmjs.com/package/html-loader ↗