{"id":13508994,"url":"https://github.com/webpack-contrib/html-loader","last_synced_at":"2025-05-08T22:22:27.374Z","repository":{"id":13516637,"uuid":"16207704","full_name":"webpack-contrib/html-loader","owner":"webpack-contrib","description":"HTML Loader","archived":false,"fork":false,"pushed_at":"2025-01-21T17:28:34.000Z","size":4246,"stargazers_count":1170,"open_issues_count":6,"forks_count":205,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-04-30T07:49:31.860Z","etag":null,"topics":["html","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webpack-contrib.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"webpack"}},"created_at":"2014-01-24T15:04:35.000Z","updated_at":"2025-04-26T15:37:31.000Z","dependencies_parsed_at":"2024-02-03T10:25:06.647Z","dependency_job_id":"531a3c3a-f4db-41bb-b990-3f117f087e67","html_url":"https://github.com/webpack-contrib/html-loader","commit_stats":{"total_commits":345,"total_committers":66,"mean_commits":"5.2272727272727275","dds":0.8,"last_synced_commit":"7662afc62d397514c777477c68d2389708b16739"},"previous_names":["webpack/html-loader"],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fhtml-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fhtml-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fhtml-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webpack-contrib%2Fhtml-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webpack-contrib","download_url":"https://codeload.github.com/webpack-contrib/html-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252962421,"owners_count":21832296,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","webpack-loader"],"created_at":"2024-08-01T02:01:01.511Z","updated_at":"2025-05-07T22:20:01.451Z","avatar_url":"https://github.com/webpack-contrib.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"200\" height=\"200\" src=\"https://www.w3.org/html/logo/downloads/HTML5_Logo.svg\" alt=\"html-loader\"\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n    \u003cimg width=\"200\" height=\"200\" vspace=\"\" hspace=\"25\" src=\"https://webpack.js.org/assets/icon-square-big.svg\" alt=\"webpack\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![tests][tests]][tests-url]\n[![coverage][cover]][cover-url]\n[![discussion][discussion]][discussion-url]\n[![size][size]][size-url]\n\n# html-loader\n\nExports HTML as string. HTML is minimized when the compiler demands.\n\n## Getting Started\n\nTo begin, you'll need to install `html-loader`:\n\n```console\nnpm install --save-dev html-loader\n```\n\nor\n\n```console\nyarn add -D html-loader\n```\n\nor\n\n```console\npnpm add -D html-loader\n```\n\nThen add the plugin to your `webpack` config. For example:\n\n**file.js**\n\n```js\nimport html from \"./file.html\";\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: \"html-loader\",\n      },\n    ],\n  },\n};\n```\n\n## Options\n\n- **[`sources`](#sources)**\n- **[`preprocessor`](#preprocessor)**\n- **[`postprocessor`](#postprocessor)**\n- **[`minimize`](#minimize)**\n- **[`esModule`](#esmodule)**\n\n### `sources`\n\nType:\n\n```ts\ntype sources =\n  | boolean\n  | {\n      list?: Array\u003c{\n        tag?: string;\n        attribute?: string;\n        type?: string;\n        filter?: (\n          tag: string,\n          attribute: string,\n          attributes: string,\n          resourcePath: string,\n        ) =\u003e boolean;\n      }\u003e;\n      urlFilter?: (\n        attribute: string,\n        value: string,\n        resourcePath: string,\n      ) =\u003e boolean;\n      scriptingEnabled?: boolean;\n    };\n```\n\nDefault: `true`\n\nBy default every loadable attribute (for example - `\u003cimg src=\"image.png\"\u003e`) is imported (`const img = require('./image.png')` or `new URL(\"./image.png\", import.meta.url)`).\nYou may need to specify loaders for images in your configuration (recommended [`asset modules`](https://webpack.js.org/guides/asset-modules/)).\n\nSupported tags and attributes:\n\n- the `src` attribute of the `audio` tag\n- the `src` attribute of the `embed` tag\n- the `src` attribute of the `img` tag\n- the `srcset` attribute of the `img` tag\n- the `src` attribute of the `input` tag\n- the `data` attribute of the `object` tag\n- the `src` attribute of the `script` tag\n- the `href` attribute of the `script` tag\n- the `xlink:href` attribute of the `script` tag\n- the `src` attribute of the `source` tag\n- the `srcset` attribute of the `source` tag\n- the `src` attribute of the `track` tag\n- the `poster` attribute of the `video` tag\n- the `src` attribute of the `video` tag\n- the `xlink:href` attribute of the `image` tag\n- the `href` attribute of the `image` tag\n- the `xlink:href` attribute of the `use` tag\n- the `href` attribute of the `use` tag\n- the `href` attribute of the `link` tag when the `rel` attribute contains `stylesheet`, `icon`, `shortcut icon`, `mask-icon`, `apple-touch-icon`, `apple-touch-icon-precomposed`, `apple-touch-startup-image`, `manifest`, `prefetch`, `preload` or when the `itemprop` attribute is `image`, `logo`, `screenshot`, `thumbnailurl`, `contenturl`, `downloadurl`, `duringmedia`, `embedurl`, `installurl`, `layoutimage`\n- the `imagesrcset` attribute of the `link` tag when the `rel` attribute contains `stylesheet`, `icon`, `shortcut icon`, `mask-icon`, `apple-touch-icon`, `apple-touch-icon-precomposed`, `apple-touch-startup-image`, `manifest`, `prefetch`, `preload`\n- the `content` attribute of the `meta` tag when the `name` attribute is `msapplication-tileimage`, `msapplication-square70x70logo`, `msapplication-square150x150logo`, `msapplication-wide310x150logo`, `msapplication-square310x310logo`, `msapplication-config`, `twitter:image` or when the `property` attribute is `og:image`, `og:image:url`, `og:image:secure_url`, `og:audio`, `og:audio:secure_url`, `og:video`, `og:video:secure_url`, `vk:image` or when the `itemprop` attribute is `image`, `logo`, `screenshot`, `thumbnailurl`, `contenturl`, `downloadurl`, `duringmedia`, `embedurl`, `installurl`, `layoutimage`\n- the `icon-uri` value component in `content` attribute of the `meta` tag when the `name` attribute is `msapplication-task`\n\n#### `boolean`\n\nThe `true` value enables the processing of all default elements and attributes, the `false` value disables the processing of all attributes.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: \"html-loader\",\n        options: {\n          // Disables attributes processing\n          sources: false,\n        },\n      },\n    ],\n  },\n};\n```\n\n#### `object`\n\nAllows you to specify which tags and attributes to process, filter them, filter urls and process sources starting with `/`.\n\nFor example:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: \"html-loader\",\n        options: {\n          sources: {\n            list: [\n              // All default supported tags and attributes\n              \"...\",\n              {\n                tag: \"img\",\n                attribute: \"data-src\",\n                type: \"src\",\n              },\n              {\n                tag: \"img\",\n                attribute: \"data-srcset\",\n                type: \"srcset\",\n              },\n            ],\n            urlFilter: (attribute, value, resourcePath) =\u003e {\n              // The `attribute` argument contains a name of the HTML attribute.\n              // The `value` argument contains a value of the HTML attribute.\n              // The `resourcePath` argument contains a path to the loaded HTML file.\n\n              if (/example\\.pdf$/.test(value)) {\n                return false;\n              }\n\n              return true;\n            },\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n#### `list`\n\nType:\n\n```ts\ntype list = Array\u003c{\n  tag?: string;\n  attribute?: string;\n  type?: string;\n  filter?: (\n    tag: string,\n    attribute: string,\n    attributes: string,\n    resourcePath: string,\n  ) =\u003e boolean;\n}\u003e;\n```\n\nDefault: [supported tags and attributes](#sources).\n\nAllows to setup which tags and attributes to process and how, as well as the ability to filter some of them.\n\nUsing `...` syntax allows you to extend [default supported tags and attributes](#sources).\n\nFor example:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: \"html-loader\",\n        options: {\n          sources: {\n            list: [\n              // All default supported tags and attributes\n              \"...\",\n              {\n                tag: \"img\",\n                attribute: \"data-src\",\n                type: \"src\",\n              },\n              {\n                tag: \"img\",\n                attribute: \"data-srcset\",\n                type: \"srcset\",\n              },\n              {\n                // Tag name\n                tag: \"link\",\n                // Attribute name\n                attribute: \"href\",\n                // Type of processing, can be `src` or `scrset`\n                type: \"src\",\n                // Allow to filter some attributes\n                filter: (tag, attribute, attributes, resourcePath) =\u003e {\n                  // The `tag` argument contains a name of the HTML tag.\n                  // The `attribute` argument contains a name of the HTML attribute.\n                  // The `attributes` argument contains all attributes of the tag.\n                  // The `resourcePath` argument contains a path to the loaded HTML file.\n\n                  if (/my-html\\.html$/.test(resourcePath)) {\n                    return false;\n                  }\n\n                  if (!/stylesheet/i.test(attributes.rel)) {\n                    return false;\n                  }\n\n                  if (\n                    attributes.type \u0026\u0026\n                    attributes.type.trim().toLowerCase() !== \"text/css\"\n                  ) {\n                    return false;\n                  }\n\n                  return true;\n                },\n              },\n            ],\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\nIf the tag name is not specified it will process all the tags.\n\n\u003e You can use your custom filter to specify html elements to be processed.\n\nFor example:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: \"html-loader\",\n        options: {\n          sources: {\n            list: [\n              {\n                // Attribute name\n                attribute: \"src\",\n                // Type of processing, can be `src` or `scrset`\n                type: \"src\",\n                // Allow to filter some attributes (optional)\n                filter: (tag, attribute, attributes, resourcePath) =\u003e {\n                  // The `tag` argument contains a name of the HTML tag.\n                  // The `attribute` argument contains a name of the HTML attribute.\n                  // The `attributes` argument contains all attributes of the tag.\n                  // The `resourcePath` argument contains a path to the loaded HTML file.\n\n                  // choose all HTML tags except img tag\n                  return tag.toLowerCase() !== \"img\";\n                },\n              },\n            ],\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\nFilter can also be used to extend the supported elements and attributes.\n\nFor example, filter can help process meta tags that reference assets:\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: \"html-loader\",\n        options: {\n          sources: {\n            list: [\n              {\n                tag: \"meta\",\n                attribute: \"content\",\n                type: \"src\",\n                filter: (tag, attribute, attributes, resourcePath) =\u003e {\n                  if (\n                    attributes.value === \"og:image\" ||\n                    attributes.name === \"twitter:image\"\n                  ) {\n                    return true;\n                  }\n\n                  return false;\n                },\n              },\n            ],\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n\u003e [!NOTE]\n\u003e\n\u003e source with a `tag` option takes precedence over source without.\n\nFilter can be used to disable default sources.\n\nFor example:\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: \"html-loader\",\n        options: {\n          sources: {\n            list: [\n              \"...\",\n              {\n                tag: \"img\",\n                attribute: \"src\",\n                type: \"src\",\n                filter: () =\u003e false,\n              },\n            ],\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n#### `urlFilter`\n\nType:\n\n```ts\ntype urlFilter = (\n  attribute: string,\n  value: string,\n  resourcePath: string,\n) =\u003e boolean;\n```\n\nDefault: `undefined`\n\nAllow to filter urls. All filtered urls will not be resolved (left in the code as they were written).\nNon-requestable sources (for example `\u003cimg src=\"javascript:void(0)\"\u003e`) are not handled by default.\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: \"html-loader\",\n        options: {\n          sources: {\n            urlFilter: (attribute, value, resourcePath) =\u003e {\n              // The `attribute` argument contains a name of the HTML attribute.\n              // The `value` argument contains a value of the HTML attribute.\n              // The `resourcePath` argument contains a path to the loaded HTML file.\n\n              if (/example\\.pdf$/.test(value)) {\n                return false;\n              }\n\n              return true;\n            },\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n#### `scriptingEnabled`\n\nType:\n\n```ts\ntype scriptingEnabled = boolean;\n```\n\nDefault: `true`\n\nBy default, the parser in `html-loader` interprets content inside `\u003cnoscript\u003e` tags as `#text`, so processing of content inside this tag will be ignored.\n\nIn order to enable processing inside `\u003cnoscript\u003e` for content recognition by the parser as `#AST`, set this parameter to: `false`\n\nAdditional information: [scriptingEnabled](https://parse5.js.org/interfaces/parse5.ParserOptions.html#scriptingEnabled)\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: \"html-loader\",\n        options: {\n          sources: {\n            // Enables processing inside the \u003cnoscript\u003e tag\n            scriptingEnabled: false,\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n### `preprocessor`\n\nType:\n\n```ts\ntype preprocessor = (content: string, loaderContext: LoaderContext) =\u003e string;\n```\n\nDefault: `undefined`\n\nAllows pre-processing of content before handling.\n\n\u003e [!WARNING]\n\u003e\n\u003e You should always return valid HTML\n\n**file.hbs**\n\n```hbs\n\u003cdiv\u003e\n  \u003cp\u003e{{firstname}} {{lastname}}\u003c/p\u003e\n  \u003cimg src=\"image.png\" alt=\"alt\" /\u003e\n\u003cdiv\u003e\n```\n\n#### `function`\n\nYou can set the `preprocessor` option as a `function` instance.\n\n**webpack.config.js**\n\n```js\nconst Handlebars = require(\"handlebars\");\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.hbs$/i,\n        loader: \"html-loader\",\n        options: {\n          preprocessor: (content, loaderContext) =\u003e {\n            let result;\n\n            try {\n              result = Handlebars.compile(content)({\n                firstname: \"Value\",\n                lastname: \"OtherValue\",\n              });\n            } catch (error) {\n              loaderContext.emitError(error);\n\n              return content;\n            }\n\n            return result;\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\nYou can also set the `preprocessor` option as an asynchronous function instance.\n\nFor example:\n\n**webpack.config.js**\n\n```js\nconst Handlebars = require(\"handlebars\");\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.hbs$/i,\n        loader: \"html-loader\",\n        options: {\n          preprocessor: async (content, loaderContext) =\u003e {\n            let result;\n\n            try {\n              result = await Handlebars.compile(content)({\n                firstname: \"Value\",\n                lastname: \"OtherValue\",\n              });\n            } catch (error) {\n              await loaderContext.emitError(error);\n\n              return content;\n            }\n\n            return result;\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n### `postprocessor`\n\nType:\n\n```ts\ntype postprocessor = (content: string, loaderContext: LoaderContext) =\u003e string;\n```\n\nDefault: `undefined`\n\nAllows post-processing of content after replacing all attributes (like `src`/`srcset`/etc).\n\n**file.html**\n\n```html\n\u003cimg src=\"image.png\" /\u003e\n\u003cimg src=\"\u003c%= 'Hello ' + (1+1) %\u003e\" /\u003e\n\u003cimg src=\"\u003c%= require('./image.png') %\u003e\" /\u003e\n\u003cimg src=\"\u003c%= new URL('./image.png', import.meta.url) %\u003e\" /\u003e\n\u003cdiv\u003e\u003c%= require('./gallery.html').default %\u003e\u003c/div\u003e\n```\n\n#### `function`\n\nYou can set the `postprocessor` option as a `function` instance.\n\n**webpack.config.js**\n\n```js\nconst Handlebars = require(\"handlebars\");\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: \"html-loader\",\n        options: {\n          postprocessor: (content, loaderContext) =\u003e {\n            // When you environment supports template literals (using browserslist or options) we will generate code using them\n            const isTemplateLiteralSupported = content[0] === \"`\";\n\n            return content\n              .replace(/\u003c%=/g, isTemplateLiteralSupported ? `\\${` : '\" +')\n              .replace(/%\u003e/g, isTemplateLiteralSupported ? \"}\" : '+ \"');\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\nYou can also set the `postprocessor` option as an asynchronous function instance.\n\nFor example:\n\n**webpack.config.js**\n\n```js\nconst Handlebars = require(\"handlebars\");\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.hbs$/i,\n        loader: \"html-loader\",\n        options: {\n          postprocessor: async (content, loaderContext) =\u003e {\n            const value = await getValue();\n            // When you environment supports template literals (using browserslist or options) we will generate code using them\n            const isTemplateLiteralSupported = content[0] === \"`\";\n\n            return content\n              .replace(/\u003c%=/g, isTemplateLiteralSupported ? `\\${` : '\" +')\n              .replace(/%\u003e/g, isTemplateLiteralSupported ? \"}\" : '+ \"')\n              .replace(\"my-value\", value);\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n### `minimize`\n\nType:\n\n```ts\ntype minimize =\n  | boolean\n  | {\n      caseSensitive?: boolean;\n      collapseWhitespace?: boolean;\n      conservativeCollapse?: boolean;\n      keepClosingSlash?: boolean;\n      minifyCSS?: boolean;\n      minifyJS?: boolean;\n      removeComments?: boolean;\n      removeRedundantAttributes?: boolean;\n      removeScriptTypeAttributes?: boolean;\n      removeStyleLinkTypeAttributes?: boolean;\n    };\n```\n\nDefault: `true` in production mode, otherwise `false`\n\nTell `html-loader` to minimize HTML.\n\n#### `boolean`\n\nThe enabled rules for minimizing by default are the following ones:\n\n```js\n({\n  caseSensitive: true,\n  collapseWhitespace: true,\n  conservativeCollapse: true,\n  keepClosingSlash: true,\n  minifyCSS: true,\n  minifyJS: true,\n  removeComments: true,\n  removeRedundantAttributes: true,\n  removeScriptTypeAttributes: true,\n  removeStyleLinkTypeAttributes: true,\n});\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: \"html-loader\",\n        options: {\n          minimize: true,\n        },\n      },\n    ],\n  },\n};\n```\n\n#### `object`\n\n**webpack.config.js**\n\nSee [html-minifier-terser](https://github.com/DanielRuf/html-minifier-terser)'s documentation for more information on the available options.\n\nThe default rules can be overridden using the following options in your `webpack.conf.js`\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: \"html-loader\",\n        options: {\n          minimize: {\n            removeComments: false,\n            collapseWhitespace: false,\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\nThe default rules can be extended:\n\n**webpack.config.js**\n\n```js\nconst { defaultMinimizerOptions } = require(\"html-loader\");\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: \"html-loader\",\n        options: {\n          minimize: {\n            ...defaultMinimizerOptions,\n            removeComments: false,\n            collapseWhitespace: false,\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n### `esModule`\n\nType:\n\n```ts\ntype esModule = boolean;\n```\n\nDefault: `true`\n\nBy default, `html-loader` generates JS modules that use the ES modules syntax.\nThere are some cases in which using ES modules is beneficial, such as [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).\n\nYou can enable a CommonJS modules syntax using:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: \"html-loader\",\n        options: {\n          esModule: false,\n        },\n      },\n    ],\n  },\n};\n```\n\n## Examples\n\n### Disable url resolving using the `\u003c!-- webpackIgnore: true --\u003e` comment\n\nWith `\u003c!-- webpackIgnore: true --\u003e` comment, one can disable sources handling for next tag.\n\n```html\n\u003c!-- Disabled url handling for the src attribute --\u003e\n\u003c!-- webpackIgnore: true --\u003e\n\u003cimg src=\"image.png\" /\u003e\n\n\u003c!-- Disabled url handling for the src and srcset attributes --\u003e\n\u003c!-- webpackIgnore: true --\u003e\n\u003cimg\n  srcset=\"image.png 480w, image.png 768w\"\n  src=\"image.png\"\n  alt=\"Elva dressed as a fairy\"\n/\u003e\n\n\u003c!-- Disabled url handling for the content attribute --\u003e\n\u003c!-- webpackIgnore: true --\u003e\n\u003cmeta itemprop=\"image\" content=\"./image.png\" /\u003e\n\n\u003c!-- Disabled url handling for the href attribute --\u003e\n\u003c!-- webpackIgnore: true --\u003e\n\u003clink rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"./image.png\" /\u003e\n```\n\n### roots\n\nWith [`resolve.roots`](https://webpack.js.org/configuration/resolve/#resolveroots) one can specify a list of directories where requests of server-relative URLs (starting with '/') are resolved.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  context: __dirname,\n  module: {\n    rules: [\n      {\n        test: /\\.html$/i,\n        loader: \"html-loader\",\n        options: {},\n      },\n      {\n        test: /\\.jpg$/,\n        type: \"asset/resource\",\n      },\n    ],\n  },\n  resolve: {\n    roots: [path.resolve(__dirname, \"fixtures\")],\n  },\n};\n```\n\n**file.html**\n\n```html\n\u003cimg src=\"/image.jpg\" /\u003e\n```\n\n```js\n// =\u003e image.jpg in __dirname/fixtures will be resolved\n```\n\n### CDN\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.jpg$/,\n        type: \"asset/resource\",\n      },\n      {\n        test: /\\.png$/,\n        type: \"asset/inline\",\n      },\n    ],\n  },\n  output: {\n    publicPath: \"http://cdn.example.com/[fullhash]/\",\n  },\n};\n```\n\n**file.html**\n\n```html\n\u003cimg src=\"image.jpg\" data-src=\"image2x.png\" /\u003e\n```\n\n**index.js**\n\n```js\nrequire(\"html-loader!./file.html\");\n\n// =\u003e '\u003cimg src=\"http://cdn.example.com/49eba9f/a992ca.jpg\" data-src=\"image2x.png\"\u003e'\n```\n\n```js\nrequire('html-loader?{\"sources\":{\"list\":[{\"tag\":\"img\",\"attribute\":\"data-src\",\"type\":\"src\"}]}}!./file.html');\n\n// =\u003e '\u003cimg src=\"image.jpg\" data-src=\"data:image/png;base64,...\" \u003e'\n```\n\n```js\nrequire('html-loader?{\"sources\":{\"list\":[{\"tag\":\"img\",\"attribute\":\"src\",\"type\":\"src\"},{\"tag\":\"img\",\"attribute\":\"data-src\",\"type\":\"src\"}]}}!./file.html');\n\n// =\u003e '\u003cimg src=\"http://cdn.example.com/49eba9f/a992ca.jpg\" data-src=\"data:image/png;base64,...\" \u003e'\n```\n\n### Process `script` and `link` tags\n\n**script.file.js**\n\n```js\nconsole.log(document);\n```\n\n**style.file.css**\n\n```css\na {\n  color: red;\n}\n```\n\n**file.html**\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003ctitle\u003eTitle of the document\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./style.file.css\" /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    Content of the document......\n    \u003cscript src=\"./script.file.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/,\n        type: \"asset/resource\",\n        generator: {\n          filename: \"[name][ext]\",\n        },\n      },\n      {\n        test: /\\.html$/i,\n        use: [\"html-loader\"],\n      },\n      {\n        test: /\\.js$/i,\n        exclude: /\\.file.js$/i,\n        loader: \"babel-loader\",\n      },\n      {\n        test: /\\.file.js$/i,\n        type: \"asset/resource\",\n      },\n      {\n        test: /\\.css$/i,\n        exclude: /\\.file.css$/i,\n        loader: \"css-loader\",\n      },\n      {\n        test: /\\.file.css$/i,\n        type: \"asset/resource\",\n      },\n    ],\n  },\n};\n```\n\n### Templating\n\nYou can use any template system. Below is an example for [handlebars](https://handlebarsjs.com/).\n\n**file.hbs**\n\n```hbs\n\u003cdiv\u003e\n  \u003cp\u003e{{firstname}} {{lastname}}\u003c/p\u003e\n  \u003cimg src=\"image.png\" alt=\"alt\" /\u003e\n\u003cdiv\u003e\n```\n\n**webpack.config.js**\n\n```js\nconst Handlebars = require(\"handlebars\");\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.hbs$/i,\n        loader: \"html-loader\",\n        options: {\n          preprocessor: (content, loaderContext) =\u003e {\n            let result;\n\n            try {\n              result = Handlebars.compile(content)({\n                firstname: \"Value\",\n                lastname: \"OtherValue\",\n              });\n            } catch (error) {\n              loaderContext.emitError(error);\n\n              return content;\n            }\n\n            return result;\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n### PostHTML\n\nYou can use [PostHTML](https://github.com/posthtml/posthtml) without any additional loaders.\n\n**file.html**\n\n```html\n\u003cimg src=\"image.jpg\" /\u003e\n```\n\n**webpack.config.js**\n\n```js\nconst posthtml = require(\"posthtml\");\nconst posthtmlWebp = require(\"posthtml-webp\");\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.hbs$/i,\n        loader: \"html-loader\",\n        options: {\n          preprocessor: (content, loaderContext) =\u003e {\n            let result;\n\n            try {\n              result = posthtml().use(plugin).process(content, { sync: true });\n            } catch (error) {\n              loaderContext.emitError(error);\n\n              return content;\n            }\n\n            return result.html;\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n### Export into HTML files\n\nA very common scenario is exporting the HTML into their own _.html_ file, to serve them directly instead of injecting with javascript.\nThis can be achieved with a combination of html-loader and [`asset modules`](https://webpack.js.org/guides/asset-modules/).\n\nThe html-loader will parse the URLs, require the images and everything you\nexpect. The extract loader will parse the javascript back into a proper html\nfile, ensuring images are required and point to proper path, and the [`asset modules`](https://webpack.js.org/guides/asset-modules/)\nwill write the _.html_ file for you. Example:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  output: {\n    assetModuleFilename: \"[name][ext]\",\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.html$/,\n        type: \"asset/resource\",\n        generator: {\n          filename: \"[name][ext]\",\n        },\n      },\n      {\n        test: /\\.html$/i,\n        use: [\"html-loader\"],\n      },\n    ],\n  },\n};\n```\n\n## Contributing\n\nPlease take a moment to read our contributing guidelines if you haven't yet done so.\n\n[CONTRIBUTING](./.github/CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/html-loader.svg\n[npm-url]: https://npmjs.com/package/html-loader\n[node]: https://img.shields.io/node/v/html-loader.svg\n[node-url]: https://nodejs.org\n[tests]: https://github.com/webpack-contrib/html-loader/workflows/html-loader/badge.svg\n[tests-url]: https://github.com/webpack-contrib/html-loader/actions\n[cover]: https://codecov.io/gh/webpack-contrib/html-loader/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/html-loader\n[discussion]: https://img.shields.io/github/discussions/webpack/webpack\n[discussion-url]: https://github.com/webpack/webpack/discussions\n[size]: https://packagephobia.now.sh/badge?p=html-loader\n[size-url]: https://packagephobia.now.sh/result?p=html-loader\n","funding_links":["https://opencollective.com/webpack"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fhtml-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebpack-contrib%2Fhtml-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebpack-contrib%2Fhtml-loader/lists"}