102.4ae0bf963c39ccfc21cd.chunk.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[102],{363:function(n,s,a){"use strict";a.r(s),s.default='<p><a href="https://npmjs.com/package/html-loader"><img src="https://img.shields.io/npm/v/html-loader.svg" alt="npm"></a>\n<a href="https://nodejs.org/"><img src="https://img.shields.io/node/v/html-loader.svg" alt="node"></a>\n<a href="https://david-dm.org/webpack-contrib/html-loader"><img src="https://david-dm.org/webpack-contrib/html-loader.svg" alt="deps"></a>\n<a href="https://github.com/webpack-contrib/html-loader/actions"><img src="https://github.com/webpack-contrib/html-loader/workflows/html-loader/badge.svg" alt="tests"></a>\n<a href="https://codecov.io/gh/webpack-contrib/html-loader"><img src="https://codecov.io/gh/webpack-contrib/html-loader/branch/master/graph/badge.svg" alt="coverage"></a>\n<a href="https://gitter.im/webpack/webpack"><img src="https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg" alt="chat"></a>\n<a href="https://packagephobia.now.sh/result?p=html-loader"><img src="https://packagephobia.now.sh/badge?p=html-loader" alt="size"></a></p>\n<p>Exports HTML as string. HTML is minimized when the compiler demands.</p>\n<h2 id="getting-started">Getting Started<a href="#getting-started" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p>To begin, you\'ll need to install <code>html-loader</code>:</p>\n<pre><code class="hljs language-console">npm install --save-dev html-loader\n</code></pre>\n<p>Then add the plugin to your <code>webpack</code> config. For example:</p>\n<p><strong>file.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">import</span> html <span class="token keyword">from</span> <span class="token string">"./file.html"</span><span class="token punctuation">;</span></code></pre>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h2 id="options">Options<a href="#options" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<table>\n<thead>\n<tr>\n<th align="center">Name</th>\n<th align="center">Type</th>\n<th align="center">Default</th>\n<th align="left">Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#sources"><code>sources</code></a></strong><p class="description mobile"><code>{Boolean\\|Object}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Boolean\\|Object}</code></td>\n<td align="center"><code>true</code></td>\n<td align="left">Enables/Disables sources handling</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#preprocessor"><code>preprocessor</code></a></strong><p class="description mobile"><code>{Function}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Function}</code></td>\n<td align="center"><code>undefined</code></td>\n<td align="left">Allows pre-processing of content before handling</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#minimize"><code>minimize</code></a></strong><p class="description mobile"><code>{Boolean\\|Object}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Boolean\\|Object}</code></td>\n<td align="center"><code>true</code>\n in production mode, otherwise \n<code>false</code></td>\n<td align="left">Tell \n<code>html-loader</code>\n to minimize HTML</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#esmodule"><code>esModule</code></a></strong><p class="description mobile"><code>{Boolean}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Boolean}</code></td>\n<td align="center"><code>true</code></td>\n<td align="left">Enable/disable ES modules syntax</td>\n</tr>\n</tbody>\n</table>\n<h3 id="sources"><code>sources</code><a href="#sources" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Boolean|Object</code>\nDefault: <code>true</code></p>\n<p>By default every loadable attributes (for example - <code>&#x3C;img src="image.png"></code>) is imported (<code>const img = require(\'./image.png\')</code> or <code>import img from "./image.png""</code>).\nYou may need to specify loaders for images in your configuration (recommended <a href="/guides/asset-modules/"><code>asset modules</code></a>).</p>\n<p>Supported tags and attributes:</p>\n<ul>\n<li>the <code>src</code> attribute of the <code>audio</code> tag</li>\n<li>the <code>src</code> attribute of the <code>embed</code> tag</li>\n<li>the <code>src</code> attribute of the <code>img</code> tag</li>\n<li>the <code>srcset</code> attribute of the <code>img</code> tag</li>\n<li>the <code>src</code> attribute of the <code>input</code> tag</li>\n<li>the <code>data</code> attribute of the <code>object</code> tag</li>\n<li>the <code>src</code> attribute of the <code>script</code> tag</li>\n<li>the <code>href</code> attribute of the <code>script</code> tag</li>\n<li>the <code>xlink:href</code> attribute of the <code>script</code> tag</li>\n<li>the <code>src</code> attribute of the <code>source</code> tag</li>\n<li>the <code>srcset</code> attribute of the <code>source</code> tag</li>\n<li>the <code>src</code> attribute of the <code>track</code> tag</li>\n<li>the <code>poster</code> attribute of the <code>video</code> tag</li>\n<li>the <code>src</code> attribute of the <code>video</code> tag</li>\n<li>the <code>xlink:href</code> attribute of the <code>image</code> tag</li>\n<li>the <code>href</code> attribute of the <code>image</code> tag</li>\n<li>the <code>xlink:href</code> attribute of the <code>use</code> tag</li>\n<li>the <code>href</code> attribute of the <code>use</code> tag</li>\n<li>the <code>href</code> attribute of the <code>link</code> tag when the <code>rel</code> attribute contains <code>stylesheet</code>, <code>icon</code>, <code>shortcut icon</code>, <code>mask-icon</code>, <code>apple-touch-icon</code>, <code>apple-touch-icon-precomposed</code>, <code>apple-touch-startup-image</code>, <code>manifest</code>, <code>prefetch</code>, <code>preload</code> or when the <code>itemprop</code> attribute is <code>image</code>, <code>logo</code>, <code>screenshot</code>, <code>thumbnailurl</code>, <code>contenturl</code>, <code>downloadurl</code>, <code>duringmedia</code>, <code>embedurl</code>, <code>installurl</code>, <code>layoutimage</code></li>\n<li>the <code>imagesrcset</code> attribute of the <code>link</code> tag when the <code>rel</code> attribute contains <code>stylesheet</code>, <code>icon</code>, <code>shortcut icon</code>, <code>mask-icon</code>, <code>apple-touch-icon</code>, <code>apple-touch-icon-precomposed</code>, <code>apple-touch-startup-image</code>, <code>manifest</code>, <code>prefetch</code>, <code>preload</code></li>\n<li>the <code>content</code> attribute of the <code>meta</code> tag when the <code>name</code> attribute is <code>msapplication-tileimage</code>, <code>msapplication-square70x70logo</code>, <code>msapplication-square150x150logo</code>, <code>msapplication-wide310x150logo</code>, <code>msapplication-square310x310logo</code>, <code>msapplication-config</code>, <code>twitter:image</code> or when the <code>property</code> attribute is <code>og:image</code>, <code>og:image:url</code>, <code>og:image:secure_url</code>, <code>og:audio</code>, <code>og:audio:secure_url</code>, <code>og:video</code>, <code>og:video:secure_url</code>, <code>vk:image</code> or when the <code>itemprop</code> attribute is <code>image</code>, <code>logo</code>, <code>screenshot</code>, <code>thumbnailurl</code>, <code>contenturl</code>, <code>downloadurl</code>, <code>duringmedia</code>, <code>embedurl</code>, <code>installurl</code>, <code>layoutimage</code></li>\n<li>the <code>icon-uri</code> value component in <code>content</code> attribute of the <code>meta</code> tag when the <code>name</code> attribute is <code>msapplication-task</code></li>\n</ul>\n<h4 id="boolean"><code>Boolean</code><a href="#boolean" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>The <code>true</code> value enables processing of all default elements and attributes, the <code>false</code> disable processing of all attributes.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          <span class="token comment">// Disables attributes processing</span>\n          sources<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="object"><code>Object</code><a href="#object" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>Allows you to specify which tags and attributes to process, filter them, filter urls and process sources starts with <code>/</code>.</p>\n<p>For example:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          sources<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n            list<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n              <span class="token comment">// All default supported tags and attributes</span>\n              <span class="token string">"..."</span><span class="token punctuation">,</span>\n              <span class="token punctuation">{</span>\n                tag<span class="token punctuation">:</span> <span class="token string">"img"</span><span class="token punctuation">,</span>\n                attribute<span class="token punctuation">:</span> <span class="token string">"data-src"</span><span class="token punctuation">,</span>\n                type<span class="token punctuation">:</span> <span class="token string">"src"</span><span class="token punctuation">,</span>\n              <span class="token punctuation">}</span><span class="token punctuation">,</span>\n              <span class="token punctuation">{</span>\n                tag<span class="token punctuation">:</span> <span class="token string">"img"</span><span class="token punctuation">,</span>\n                attribute<span class="token punctuation">:</span> <span class="token string">"data-srcset"</span><span class="token punctuation">,</span>\n                type<span class="token punctuation">:</span> <span class="token string">"srcset"</span><span class="token punctuation">,</span>\n              <span class="token punctuation">}</span><span class="token punctuation">,</span>\n            <span class="token punctuation">]</span><span class="token punctuation">,</span>\n            urlFilter<span class="token punctuation">:</span> <span class="token punctuation">(</span>attribute<span class="token punctuation">,</span> value<span class="token punctuation">,</span> resourcePath<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n              <span class="token comment">// The `attribute` argument contains a name of the HTML attribute.</span>\n              <span class="token comment">// The `value` argument contains a value of the HTML attribute.</span>\n              <span class="token comment">// The `resourcePath` argument contains a path to the loaded HTML file.</span>\n\n              <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex">/example\\.pdf$/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n                <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n              <span class="token punctuation">}</span>\n\n              <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\n          <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="list"><code>list</code><a href="#list" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>Type: <code>Array</code>\nDefault: <a href="#sources">supported tags and attributes</a>.</p>\n<p>Allows to setup which tags and attributes to process and how, and the ability to filter some of them.</p>\n<p>Using <code>...</code> syntax allows you to extend <a href="#sources">default supported tags and attributes</a>.</p>\n<p>For example:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          sources<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n            list<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n              <span class="token comment">// All default supported tags and attributes</span>\n              <span class="token string">"..."</span><span class="token punctuation">,</span>\n              <span class="token punctuation">{</span>\n                tag<span class="token punctuation">:</span> <span class="token string">"img"</span><span class="token punctuation">,</span>\n                attribute<span class="token punctuation">:</span> <span class="token string">"data-src"</span><span class="token punctuation">,</span>\n                type<span class="token punctuation">:</span> <span class="token string">"src"</span><span class="token punctuation">,</span>\n              <span class="token punctuation">}</span><span class="token punctuation">,</span>\n              <span class="token punctuation">{</span>\n                tag<span class="token punctuation">:</span> <span class="token string">"img"</span><span class="token punctuation">,</span>\n                attribute<span class="token punctuation">:</span> <span class="token string">"data-srcset"</span><span class="token punctuation">,</span>\n                type<span class="token punctuation">:</span> <span class="token string">"srcset"</span><span class="token punctuation">,</span>\n              <span class="token punctuation">}</span><span class="token punctuation">,</span>\n              <span class="token punctuation">{</span>\n                <span class="token comment">// Tag name</span>\n                tag<span class="token punctuation">:</span> <span class="token string">"link"</span><span class="token punctuation">,</span>\n                <span class="token comment">// Attribute name</span>\n                attribute<span class="token punctuation">:</span> <span class="token string">"href"</span><span class="token punctuation">,</span>\n                <span class="token comment">// Type of processing, can be `src` or `scrset`</span>\n                type<span class="token punctuation">:</span> <span class="token string">"src"</span><span class="token punctuation">,</span>\n                <span class="token comment">// Allow to filter some attributes</span>\n                filter<span class="token punctuation">:</span> <span class="token punctuation">(</span>tag<span class="token punctuation">,</span> attribute<span class="token punctuation">,</span> attributes<span class="token punctuation">,</span> resourcePath<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n                  <span class="token comment">// The `tag` argument contains a name of the HTML tag.</span>\n                  <span class="token comment">// The `attribute` argument contains a name of the HTML attribute.</span>\n                  <span class="token comment">// The `attributes` argument contains all attributes of the tag.</span>\n                  <span class="token comment">// The `resourcePath` argument contains a path to the loaded HTML file.</span>\n\n                  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex">/my-html\\.html$/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>resourcePath<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n                    <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n                  <span class="token punctuation">}</span>\n\n                  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token regex">/stylesheet/i</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>attributes<span class="token punctuation">.</span>rel<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n                    <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n                  <span class="token punctuation">}</span>\n\n                  <span class="token keyword">if</span> <span class="token punctuation">(</span>\n                    attributes<span class="token punctuation">.</span>type <span class="token operator">&#x26;&#x26;</span>\n                    attributes<span class="token punctuation">.</span>type<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token string">"text/css"</span>\n                  <span class="token punctuation">)</span> <span class="token punctuation">{</span>\n                    <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n                  <span class="token punctuation">}</span>\n\n                  <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\n              <span class="token punctuation">}</span><span class="token punctuation">,</span>\n            <span class="token punctuation">]</span><span class="token punctuation">,</span>\n          <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>If the tag name is not specified it will process all the tags.</p>\n<blockquote>\n<p>You can use your custom filter to specify html elements to be processed.</p>\n</blockquote>\n<p>For example:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          sources<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n            list<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n              <span class="token punctuation">{</span>\n                <span class="token comment">// Attribute name</span>\n                attribute<span class="token punctuation">:</span> <span class="token string">"src"</span><span class="token punctuation">,</span>\n                <span class="token comment">// Type of processing, can be `src` or `scrset`</span>\n                type<span class="token punctuation">:</span> <span class="token string">"src"</span><span class="token punctuation">,</span>\n                <span class="token comment">// Allow to filter some attributes (optional)</span>\n                filter<span class="token punctuation">:</span> <span class="token punctuation">(</span>tag<span class="token punctuation">,</span> attribute<span class="token punctuation">,</span> attributes<span class="token punctuation">,</span> resourcePath<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n                  <span class="token comment">// The `tag` argument contains a name of the HTML tag.</span>\n                  <span class="token comment">// The `attribute` argument contains a name of the HTML attribute.</span>\n                  <span class="token comment">// The `attributes` argument contains all attributes of the tag.</span>\n                  <span class="token comment">// The `resourcePath` argument contains a path to the loaded HTML file.</span>\n\n                  <span class="token comment">// choose all HTML tags except img tag</span>\n                  <span class="token keyword">return</span> tag<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token string">"img"</span><span class="token punctuation">;</span>\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\n              <span class="token punctuation">}</span><span class="token punctuation">,</span>\n            <span class="token punctuation">]</span><span class="token punctuation">,</span>\n          <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>Filter can also be used to extend the supported elements and attributes.</p>\n<p>For example, filter can help process meta tags that reference assets:</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          sources<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n            list<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n              <span class="token punctuation">{</span>\n                tag<span class="token punctuation">:</span> <span class="token string">"meta"</span><span class="token punctuation">,</span>\n                attribute<span class="token punctuation">:</span> <span class="token string">"content"</span><span class="token punctuation">,</span>\n                type<span class="token punctuation">:</span> <span class="token string">"src"</span><span class="token punctuation">,</span>\n                filter<span class="token punctuation">:</span> <span class="token punctuation">(</span>tag<span class="token punctuation">,</span> attribute<span class="token punctuation">,</span> attributes<span class="token punctuation">,</span> resourcePath<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n                  <span class="token keyword">if</span> <span class="token punctuation">(</span>\n                    attributes<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">"og:image"</span> <span class="token operator">||</span>\n                    attributes<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">"twitter:image"</span>\n                  <span class="token punctuation">)</span> <span class="token punctuation">{</span>\n                    <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\n                  <span class="token punctuation">}</span>\n\n                  <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\n              <span class="token punctuation">}</span><span class="token punctuation">,</span>\n            <span class="token punctuation">]</span><span class="token punctuation">,</span>\n          <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p><strong>Note:</strong> source with a <code>tag</code> option takes precedence over source without.</p>\n<p>Filter can be used to disable default sources.</p>\n<p>For example:</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          sources<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n            list<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n              <span class="token string">"..."</span><span class="token punctuation">,</span>\n              <span class="token punctuation">{</span>\n                tag<span class="token punctuation">:</span> <span class="token string">"img"</span><span class="token punctuation">,</span>\n                attribute<span class="token punctuation">:</span> <span class="token string">"src"</span><span class="token punctuation">,</span>\n                type<span class="token punctuation">:</span> <span class="token string">"src"</span><span class="token punctuation">,</span>\n                filter<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n              <span class="token punctuation">}</span><span class="token punctuation">,</span>\n            <span class="token punctuation">]</span><span class="token punctuation">,</span>\n          <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="urlfilter"><code>urlFilter</code><a href="#urlfilter" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>Type: <code>Function</code>\nDefault: <code>undefined</code></p>\n<p>Allow to filter urls. All filtered urls will not be resolved (left in the code as they were written).\nAll non requestable sources (for example <code>&#x3C;img src="javascript:void(0)"></code>) do not handle by default.</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          sources<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n            urlFilter<span class="token punctuation">:</span> <span class="token punctuation">(</span>attribute<span class="token punctuation">,</span> value<span class="token punctuation">,</span> resourcePath<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n              <span class="token comment">// The `attribute` argument contains a name of the HTML attribute.</span>\n              <span class="token comment">// The `value` argument contains a value of the HTML attribute.</span>\n              <span class="token comment">// The `resourcePath` argument contains a path to the loaded HTML file.</span>\n\n              <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex">/example\\.pdf$/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n                <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n              <span class="token punctuation">}</span>\n\n              <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\n          <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="preprocessor"><code>preprocessor</code><a href="#preprocessor" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Function</code>\nDefault: <code>undefined</code></p>\n<p>Allows pre-processing of content before handling.</p>\n<blockquote>\n<p>⚠ You should always return valid HTML</p>\n</blockquote>\n<p><strong>file.hbs</strong></p>\n<pre><code class="hljs language-hbs">&#x3C;div>\n  &#x3C;p>{{firstname}} {{lastname}}&#x3C;/p>\n  &#x3C;img src="image.png" alt="alt" />\n&#x3C;div>\n</code></pre>\n<h4 id="function"><code>Function</code><a href="#function" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>You can set the <code>preprocessor</code> option as a <code>Function</code> instance.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> Handlebars <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"handlebars"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.hbs$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          preprocessor<span class="token punctuation">:</span> <span class="token punctuation">(</span>content<span class="token punctuation">,</span> loaderContext<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n            <span class="token keyword">let</span> result<span class="token punctuation">;</span>\n\n            <span class="token keyword">try</span> <span class="token punctuation">{</span>\n              result <span class="token operator">=</span> Handlebars<span class="token punctuation">.</span><span class="token function">compile</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n                firstname<span class="token punctuation">:</span> <span class="token string">"Value"</span><span class="token punctuation">,</span>\n                lastname<span class="token punctuation">:</span> <span class="token string">"OtherValue"</span><span class="token punctuation">,</span>\n              <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n            <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n              loaderContext<span class="token punctuation">.</span><span class="token function">emitError</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n              <span class="token keyword">return</span> content<span class="token punctuation">;</span>\n            <span class="token punctuation">}</span>\n\n            <span class="token keyword">return</span> result<span class="token punctuation">;</span>\n          <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>You can also set the <code>preprocessor</code> option as an asynchronous function instance.</p>\n<p>For example:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> Handlebars <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"handlebars"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.hbs$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          preprocessor<span class="token punctuation">:</span> <span class="token keyword">async</span> <span class="token punctuation">(</span>content<span class="token punctuation">,</span> loaderContext<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n            <span class="token keyword">let</span> result<span class="token punctuation">;</span>\n\n            <span class="token keyword">try</span> <span class="token punctuation">{</span>\n              result <span class="token operator">=</span> <span class="token keyword">await</span> Handlebars<span class="token punctuation">.</span><span class="token function">compile</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n                firstname<span class="token punctuation">:</span> <span class="token string">"Value"</span><span class="token punctuation">,</span>\n                lastname<span class="token punctuation">:</span> <span class="token string">"OtherValue"</span><span class="token punctuation">,</span>\n              <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n            <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n              <span class="token keyword">await</span> loaderContext<span class="token punctuation">.</span><span class="token function">emitError</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n              <span class="token keyword">return</span> content<span class="token punctuation">;</span>\n            <span class="token punctuation">}</span>\n\n            <span class="token keyword">return</span> result<span class="token punctuation">;</span>\n          <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="minimize"><code>minimize</code><a href="#minimize" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Boolean|Object</code>\nDefault: <code>true</code> in production mode, otherwise <code>false</code></p>\n<p>Tell <code>html-loader</code> to minimize HTML.</p>\n<h4 id="boolean-1"><code>Boolean</code><a href="#boolean-1" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>The enabled rules for minimizing by default are the following ones:</p>\n<pre><code class="hljs language-js"><span class="token punctuation">(</span><span class="token punctuation">{</span>\n  caseSensitive<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  collapseWhitespace<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  conservativeCollapse<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  keepClosingSlash<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  minifyCSS<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  minifyJS<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  removeComments<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  removeRedundantAttributes<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  removeScriptTypeAttributes<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n  removeStyleLinkTypeAttributes<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          minimize<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="object-1"><code>Object</code><a href="#object-1" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p><strong>webpack.config.js</strong></p>\n<p>See <a href="https://github.com/DanielRuf/html-minifier-terser">html-minifier-terser</a>\'s documentation for more information on the available options.</p>\n<p>The rules can be disabled using the following options in your <code>webpack.conf.js</code></p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          minimize<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n            removeComments<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n            collapseWhitespace<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n          <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="esmodule"><code>esModule</code><a href="#esmodule" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Boolean</code>\nDefault: <code>true</code></p>\n<p>By default, <code>html-loader</code> generates JS modules that use the ES modules syntax.\nThere are some cases in which using ES modules is beneficial, like in the case of <a href="/plugins/module-concatenation-plugin/">module concatenation</a> and <a href="/guides/tree-shaking/">tree shaking</a>.</p>\n<p>You can enable a CommonJS modules syntax using:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          esModule<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h2 id="examples">Examples<a href="#examples" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<h3 id="disable-url-resolving-using-the--comment">Disable url resolving using the <code></code> comment<a href="#disable-url-resolving-using-the--comment" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>With <code></code> comment, can to disable sources handling for next tag.</p>\n<pre><code class="hljs language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>image.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n\n\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>img</span>\n  <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>image.png 480w, image.png 768w<span class="token punctuation">"</span></span>\n  <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>image.png<span class="token punctuation">"</span></span>\n  <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Elva dressed as a fairy<span class="token punctuation">"</span></span>\n<span class="token punctuation">/></span></span>\n\n\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./image.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n\n\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>image/png<span class="token punctuation">"</span></span> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>192x192<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./image.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></code></pre>\n<h3 id="roots">roots<a href="#roots" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>With <a href="/configuration/resolve/#resolveroots"><code>resolve.roots</code></a> can specify a list of directories where requests of server-relative URLs (starting with \'/\') are resolved.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  context<span class="token punctuation">:</span> __dirname<span class="token punctuation">,</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.jpg$/</span><span class="token punctuation">,</span>\n        type<span class="token punctuation">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    roots<span class="token punctuation">:</span> <span class="token punctuation">[</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"fixtures"</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p><strong>file.html</strong></p>\n<pre><code class="hljs language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/image.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></code></pre>\n<pre><code class="hljs language-js"><span class="token comment">// => image.jpg in __dirname/fixtures will be resolved</span></code></pre>\n<h3 id="cdn">CDN<a href="#cdn" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.jpg$/</span><span class="token punctuation">,</span>\n        type<span class="token punctuation">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.png$/</span><span class="token punctuation">,</span>\n        type<span class="token punctuation">:</span> <span class="token string">"asset/inline"</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  output<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    publicPath<span class="token punctuation">:</span> <span class="token string">"http://cdn.example.com/[fullhash]/"</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p><strong>file.html</strong></p>\n<pre><code class="hljs language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>image.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">data-src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>image2x.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></code></pre>\n<p><strong>index.js</strong></p>\n<pre><code class="hljs language-js"><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"html-loader!./file.html"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// => \'&#x3C;img src="http://cdn.example.com/49eba9f/a992ca.jpg" data-src="image2x.png">\'</span></code></pre>\n<pre><code class="hljs language-js"><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'html-loader?{"sources":{"list":[{"tag":"img","attribute":"data-src","type":"src"}]}}!./file.html\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// => \'&#x3C;img src="image.jpg" data-src="data:image/png;base64,..." >\'</span></code></pre>\n<pre><code class="hljs language-js"><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'html-loader?{"sources":{"list":[{"tag":"img","attribute":"src","type":"src"},{"tag":"img","attribute":"data-src","type":"src"}]}}!./file.html\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// => \'&#x3C;img src="http://cdn.example.com/49eba9f/a992ca.jpg" data-src="data:image/png;base64,..." >\'</span></code></pre>\n<h3 id="process-script-and-link-tags">Process <code>script</code> and <code>link</code> tags<a href="#process-script-and-link-tags" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p><strong>script.file.js</strong></p>\n<pre><code class="hljs language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<p><strong>style.file.css</strong></p>\n<pre><code class="hljs language-css"><span class="token selector">a</span> <span class="token punctuation">{</span>\n  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>\n<p><strong>file.html</strong></p>\n<pre><code class="hljs language-html"><span class="token doctype">&#x3C;!DOCTYPE html></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>html</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>head</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>title</span><span class="token punctuation">></span></span>Title of the document<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>title</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./style.file.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>head</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>body</span><span class="token punctuation">></span></span>\n    Content of the document......\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./script.file.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>body</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>html</span><span class="token punctuation">></span></span></code></pre>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/</span><span class="token punctuation">,</span>\n        type<span class="token punctuation">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>\n        generator<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          filename<span class="token punctuation">:</span> <span class="token string">"[name][ext]"</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/i</span><span class="token punctuation">,</span>\n        use<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"extract-loader"</span><span class="token punctuation">,</span> <span class="token string">"html-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.js$/i</span><span class="token punctuation">,</span>\n        exclude<span class="token punctuation">:</span> <span class="token regex">/\\.file.js$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"babel-loader"</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.file.js$/i</span><span class="token punctuation">,</span>\n        type<span class="token punctuation">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n        exclude<span class="token punctuation">:</span> <span class="token regex">/\\.file.css$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.file.css$/i</span><span class="token punctuation">,</span>\n        type<span class="token punctuation">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="templating">Templating<a href="#templating" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>You can use any template system. Below is an example for <a href="https://handlebarsjs.com/">handlebars</a>.</p>\n<p><strong>file.hbs</strong></p>\n<pre><code class="hljs language-hbs">&#x3C;div>\n  &#x3C;p>{{firstname}} {{lastname}}&#x3C;/p>\n  &#x3C;img src="image.png" alt="alt" />\n&#x3C;div>\n</code></pre>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> Handlebars <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"handlebars"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.hbs$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          preprocessor<span class="token punctuation">:</span> <span class="token punctuation">(</span>content<span class="token punctuation">,</span> loaderContext<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n            <span class="token keyword">let</span> result<span class="token punctuation">;</span>\n\n            <span class="token keyword">try</span> <span class="token punctuation">{</span>\n              result <span class="token operator">=</span> Handlebars<span class="token punctuation">.</span><span class="token function">compile</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n                firstname<span class="token punctuation">:</span> <span class="token string">"Value"</span><span class="token punctuation">,</span>\n                lastname<span class="token punctuation">:</span> <span class="token string">"OtherValue"</span><span class="token punctuation">,</span>\n              <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n            <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n              loaderContext<span class="token punctuation">.</span><span class="token function">emitError</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n              <span class="token keyword">return</span> content<span class="token punctuation">;</span>\n            <span class="token punctuation">}</span>\n\n            <span class="token keyword">return</span> result<span class="token punctuation">;</span>\n          <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="posthtml">PostHTML<a href="#posthtml" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>You can use <a href="https://github.com/posthtml/posthtml">PostHTML</a> without any additional loaders.</p>\n<p><strong>file.html</strong></p>\n<pre><code class="hljs language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>image.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></code></pre>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> posthtml <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"posthtml"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> posthtmlWebp <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"posthtml-webp"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.hbs$/i</span><span class="token punctuation">,</span>\n        loader<span class="token punctuation">:</span> <span class="token string">"html-loader"</span><span class="token punctuation">,</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          preprocessor<span class="token punctuation">:</span> <span class="token punctuation">(</span>content<span class="token punctuation">,</span> loaderContext<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n            <span class="token keyword">let</span> result<span class="token punctuation">;</span>\n\n            <span class="token keyword">try</span> <span class="token punctuation">{</span>\n              result <span class="token operator">=</span> <span class="token function">posthtml</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>plugin<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">process</span><span class="token punctuation">(</span>content<span class="token punctuation">,</span> <span class="token punctuation">{</span> sync<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n            <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n              loaderContext<span class="token punctuation">.</span><span class="token function">emitError</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n              <span class="token keyword">return</span> content<span class="token punctuation">;</span>\n            <span class="token punctuation">}</span>\n\n            <span class="token keyword">return</span> result<span class="token punctuation">.</span>html<span class="token punctuation">;</span>\n          <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="export-into-html-files">Export into HTML files<a href="#export-into-html-files" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>A very common scenario is exporting the HTML into their own <em>.html</em> file, to\nserve them directly instead of injecting with javascript. This can be achieved\nwith a combination of 2 loaders:</p>\n<ul>\n<li><a href="https://github.com/peerigon/extract-loader">extract-loader</a></li>\n<li>html-loader</li>\n</ul>\n<p>and <a href="/guides/asset-modules/"><code>asset modules</code></a></p>\n<p>The 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 <a href="/guides/asset-modules/"><code>asset modules</code></a>\nwill write the <em>.html</em> file for you. Example:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  output<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    assetModuleFilename<span class="token punctuation">:</span> <span class="token string">"[name][ext]"</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/</span><span class="token punctuation">,</span>\n        type<span class="token punctuation">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>\n        generator<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          filename<span class="token punctuation">:</span> <span class="token string">"[name][ext]"</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span>\n        test<span class="token punctuation">:</span> <span class="token regex">/\\.html$/i</span><span class="token punctuation">,</span>\n        use<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"extract-loader"</span><span class="token punctuation">,</span> <span class="token string">"html-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h2 id="contributing">Contributing<a href="#contributing" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p>Please take a moment to read our contributing guidelines if you haven\'t yet done so.</p>\n<p><a href="https://github.com/webpack-contrib/html-loader/blob/master/.github/CONTRIBUTING.md">CONTRIBUTING</a></p>\n<h2 id="license">License<a href="#license" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p><a href="https://github.com/webpack-contrib/html-loader/blob/master/LICENSE">MIT</a></p>\n'}}]);