{"id":20102,"library":"html-loader","title":"html-loader","description":"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.","status":"active","version":"5.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/webpack-contrib/html-loader","tags":["javascript","webpack","html","loader"],"install":[{"cmd":"npm install html-loader","lang":"bash","label":"npm"},{"cmd":"yarn add html-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for loader functionality","package":"webpack","optional":false}],"imports":[{"note":"No JavaScript symbol is exported; use as a webpack loader string.","wrong":"const HtmlLoader = require('html-loader');","symbol":"default","correct":"module.exports = { module: { rules: [ { test: /\\.html$/i, loader: 'html-loader' } ] } };"},{"note":"ESM import is valid for webpack config files using ESM, but the loader is used as a string in rules.","wrong":"","symbol":"default import in webpack config","correct":"import HtmlLoader from 'html-loader';"},{"note":"CommonJS require works in webpack config; the loader can be referenced as a string.","wrong":"","symbol":"require in webpack config","correct":"const HtmlLoader = require('html-loader');"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  mode: 'production',\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: 'html-loader',\n        options: {\n          sources: {\n            list: [\n              {\n                tag: 'img',\n                attribute: 'src',\n                type: 'src',\n              },\n            ],\n            urlFilter: (attribute, value, resourcePath) => {\n              // Only process .png files\n              return /\\.png$/i.test(value);\n            },\n          },\n          minimize: true,\n        },\n      },\n    ],\n  },\n};","lang":"javascript","description":"Configures html-loader in webpack to process HTML files, resolve image sources, and minimize output."},"warnings":[{"fix":"Upgrade Node.js to >=18.12.0","message":"Minimum Node.js version changed to 18.12.0 in v5.0.0","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Upgrade Node.js to >=14.15.0","message":"Minimum Node.js version changed to 14.15.0 in v4.0.0","severity":"breaking","affected_versions":">=4.0.0 <5.0.0"},{"fix":"Test HTML parsing with new parse5 version; adjust HTML if needed","message":"parse5 updated to v7.0.0 in v4.0.0, may cause different parsing behavior","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Replace 'interpolate' with 'preprocessor' function","message":"The 'interpolate' option was removed in v3.0.0; use 'preprocessor' instead","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Configure asset modules or file-loader for referenced assets","message":"By default, html-loader imports all loadable asset attributes (e.g., img src). Ensure you have appropriate loaders for those assets, such as asset modules.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use path.resolve(path.dirname(resourcePath), value) if needed","message":"When 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.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add { test: /\\.html$/i, loader: 'html-loader' } to module.rules in webpack.config.js","cause":"Missing html-loader rule in webpack config for .html files","error":"Module parse failed: Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type."},{"fix":"Run 'npm install --save-dev html-loader' or 'yarn add -D html-loader'","cause":"html-loader not installed","error":"Error: Cannot find module 'html-loader'"},{"fix":"Check the options object matches the documented schema (sources, preprocessor, postprocessor, minimize, esModule)","cause":"Invalid or misspelled option in html-loader configuration","error":"ValidationError: Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema."},{"fix":"Replace 'interpolate' with a 'preprocessor' function","cause":"Using deprecated 'interpolate' option removed in v3.0.0","error":"Error: 'interpolate' option is not supported. Use 'preprocessor' instead."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}