开源软件名称：

开源软件地址：

开源编程语言：

开源软件介绍：

html-loader

Exports HTML as string. HTML is minimized when the compiler demands.

Getting Started

To begin, you'll need to install html-loader:

npm install --save-dev html-loader

or

yarn add -D html-loader

or

pnpm add -D html-loader

Then add the plugin to your webpack config. For example:

file.js

import html from "./file.html";

webpack.config.js

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

Options

• sources
• preprocessor
• minimize
• esModule

sources

Type:

type sources =
  | boolean
  | {
      list?: Array<{
        tag?: string;
        attribute?: string;
        type?: string;
        filter?: (
          tag: string,
          attribute: string,
          attributes: string,
          resourcePath: string
        ) => boolean;
      }>;
      urlFilter?: (
        attribute: string,
        value: string,
        resourcePath: string
      ) => boolean;
    };

Default: true

By default every loadable attributes (for example - <img src="image.png">) is imported (const img = require('./image.png') or import img from "./image.png""). You may need to specify loaders for images in your configuration (recommended asset modules).

Supported tags and attributes:

• the src attribute of the audio tag
• the src attribute of the embed tag
• the src attribute of the img tag
• the srcset attribute of the img tag
• the src attribute of the input tag
• the data attribute of the object tag
• the src attribute of the script tag
• the href attribute of the script tag
• the xlink:href attribute of the script tag
• the src attribute of the source tag
• the srcset attribute of the source tag
• the src attribute of the track tag
• the poster attribute of the video tag
• the src attribute of the video tag
• the xlink:href attribute of the image tag
• the href attribute of the image tag
• the xlink:href attribute of the use tag
• the href attribute of the use tag
• 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
• 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
• 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
• the icon-uri value component in content attribute of the meta tag when the name attribute is msapplication-task

boolean

The true value enables processing of all default elements and attributes, the false disable processing of all attributes.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          // Disables attributes processing
          sources: false,
        },
      },
    ],
  },
};

object

Allows you to specify which tags and attributes to process, filter them, filter urls and process sources starts with /.

For example:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          sources: {
            list: [
              // All default supported tags and attributes
              "...",
              {
                tag: "img",
                attribute: "data-src",
                type: "src",
              },
              {
                tag: "img",
                attribute: "data-srcset",
                type: "srcset",
              },
            ],
            urlFilter: (attribute, value, resourcePath) => {
              // The `attribute` argument contains a name of the HTML attribute.
              // The `value` argument contains a value of the HTML attribute.
              // The `resourcePath` argument contains a path to the loaded HTML file.

              if (/example\.pdf$/.test(value)) {
                return false;
              }

              return true;
            },
          },
        },
      },
    ],
  },
};

list

Type:

type list = Array<{
  tag?: string;
  attribute?: string;
  type?: string;
  filter?: (
    tag: string,
    attribute: string,
    attributes: string,
    resourcePath: string
  ) => boolean;
}>;

Default: supported tags and attributes.

Allows to setup which tags and attributes to process and how, and the ability to filter some of them.

Using ... syntax allows you to extend default supported tags and attributes.

For example:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          sources: {
            list: [
              // All default supported tags and attributes
              "...",
              {
                tag: "img",
                attribute: "data-src",
                type: "src",
              },
              {
                tag: "img",
                attribute: "data-srcset",
                type: "srcset",
              },
              {
                // Tag name
                tag: "link",
                // Attribute name
                attribute: "href",
                // Type of processing, can be `src` or `scrset`
                type: "src",
                // Allow to filter some attributes
                filter: (tag, attribute, attributes, resourcePath) => {
                  // The `tag` argument contains a name of the HTML tag.
                  // The `attribute` argument contains a name of the HTML attribute.
                  // The `attributes` argument contains all attributes of the tag.
                  // The `resourcePath` argument contains a path to the loaded HTML file.

                  if (/my-html\.html$/.test(resourcePath)) {
                    return false;
                  }

                  if (!/stylesheet/i.test(attributes.rel)) {
                    return false;
                  }

                  if (
                    attributes.type &&
                    attributes.type.trim().toLowerCase() !== "text/css"
                  ) {
                    return false;
                  }

                  return true;
                },
              },
            ],
          },
        },
      },
    ],
  },
};

If the tag name is not specified it will process all the tags.

You can use your custom filter to specify html elements to be processed.

For example:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          sources: {
            list: [
              {
                // Attribute name
                attribute: "src",
                // Type of processing, can be `src` or `scrset`
                type: "src",
                // Allow to filter some attributes (optional)
                filter: (tag, attribute, attributes, resourcePath) => {
                  // The `tag` argument contains a name of the HTML tag.
                  // The `attribute` argument contains a name of the HTML attribute.
                  // The `attributes` argument contains all attributes of the tag.
                  // The `resourcePath` argument contains a path to the loaded HTML file.

                  // choose all HTML tags except img tag
                  return tag.toLowerCase() !== "img";
                },
              },
            ],
          },
        },
      },
    ],
  },
};

Filter can also be used to extend the supported elements and attributes.

For example, filter can help process meta tags that reference assets:

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          sources: {
            list: [
              {
                tag: "meta",
                attribute: "content",
                type: "src",
                filter: (tag, attribute, attributes, resourcePath) => {
                  if (
                    attributes.value === "og:image" ||
                    attributes.name === "twitter:image"
                  ) {
                    return true;
                  }

                  return false;
                },
              },
            ],
          },
        },
      },
    ],
  },
};

Note

source with a tag option takes precedence over source without.

Filter can be used to disable default sources.

For example:

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          sources: {
            list: [
              "...",
              {
                tag: "img",
                attribute: "src",
                type: "src",
                filter: () => false,
              },
            ],
          },
        },
      },
    ],
  },
};

urlFilter

Type:

type urlFilter = (
  attribute: string,
  value: string,
  resourcePath: string
) => boolean;

Default: undefined

Allow to filter urls. All filtered urls will not be resolved (left in the code as they were written). All non requestable sources (for example <img src="javascript:void(0)">) do not handle by default.

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          sources: {
            urlFilter: (attribute, value, resourcePath) => {
              // The `attribute` argument contains a name of the HTML attribute.
              // The `value` argument contains a value of the HTML attribute.
              // The `resourcePath` argument contains a path to the loaded HTML file.

              if (/example\.pdf$/.test(value)) {
                return false;
              }

              return true;
            },
          },
        },
      },
    ],
  },
};

preprocessor

Type:

type preprocessor = (
  content: string | Buffer,
  loaderContext: LoaderContext
) => HTMLElement;

Default: undefined

Allows pre-processing of content before handling.

Warning

You should always return valid HTML

file.hbs

<div>
  <p>{{firstname}} {{lastname}}</p>
  <img src="image.png" alt="alt" />
<div>

function

You can set the preprocessor option as a function instance.

webpack.config.js

const Handlebars = require("handlebars");

module.exports = {
  module: {
    rules: [
      {
        test: /\.hbs$/i,
        loader: "html-loader",
        options: {
          preprocessor: (content, loaderContext) => {
            let result;

            try {
              result = Handlebars.compile(content)({
                firstname: "Value",
                lastname: "OtherValue",
              });
            } catch (error) {
              loaderContext.emitError(error);

              return content;
            }

            return result;
          },
        },
      },
    ],
  },
};

You can also set the preprocessor option as an asynchronous function instance.

For example:

webpack.config.js

const Handlebars = require("handlebars");

module.exports = {
  module: {
    rules: [
      {
        test: /\.hbs$/i,
        loader: "html-loader",
        options: {
          preprocessor: async (content, loaderContext) => {
            let result;

            try {
              result = await Handlebars.compile(content)({
                firstname: "Value",
                lastname: "OtherValue",
              });
            } catch (error) {
              await loaderContext.emitError(error);

              return content;
            }

            return result;
          },
        },
      },
    ],
  },
};

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

评论

全部评论

专题导读

More+

10-27 六六分期app的软件客服如何联系？(六六分期
11-06 可心卡盟:win10系统火狐flash插件崩溃怎么
11-06 亲亲特价:怎么删除回收站图标
11-06 济南大学虚拟社区:鲁大师节能降温的具体办
11-06 xlueops.exe:无线网络安装向导
11-06 女斗合众国:win7系统cf与主机连接不稳定怎
11-06 0xc000022-[cf烟雾头]cf怎么调烟雾头
11-06 qizideyouhuo:应用程序无法正常启动0xc0000
11-06 ipz-185:win7系统vcf文件怎么打开
11-06 傻哥蹦迪:win10系统s4怎么打开usb调试
11-06 八神浩树gtaste:回收站清空了怎么恢复
11-06 妖尾之黑色守护:win10系统电脑没有1440x900
11-06 校园至尊魔王小说:win7系统浏览网页时字体
11-06 女斗合众国:win10系统访问共享文件夹提示请
11-06 tokyo hot n0654:恢复win7系统默认字体一招
11-06 雨酷仙境:设置win7系统转移临时文件夹腾出
11-06 阿穆纳伊之杖:win7系统开始菜单在右边还原
11-06 tunespotting:win10系统火狐flash插件总是
11-06 甘尔葛分析师：计谋网站seo关键词暴涨有什
11-06 蔡贵霖: 计谋网站seo关键词暴涨有什么秘密
11-06 博益网首页:ao3网页版进入不了解决方法
11-06 漏斗子专栏: 网站数据分析小白易懂精华篇
11-06 见证双虹怎么做:win7系统开启telnet命令的
11-06 颾狐蝶蜋:系统资源不足无法完成请求的服务
11-06 国光中学校歌:提交网站到alexa查询详细步骤
11-06 西安有情天:静态网页和动态网页的区别
11-06 红木雅尚斋:外部链接构造对网站的好处
11-06 前官礼遇：防止域名劫持–增强域安全性的10
11-06 密传二转答案: 中文分词算法有哪些
11-06 金泉家园邮编:百度快照劫持的表现及应对方

上一篇：

Sponsor @mrdoob on GitHub Sponsors · GitHub发布时间：2022-06-17

下一篇：

mrdoob/htmleditor: Simple editor for messing around.发布时间：2022-06-17

热门推荐

More+

• 

  微信小程序 自定义导航栏 自动获取高度 写

• 

  librespeed/speedtest: Self-hosted Speedt

• 

  CVE-2022-1641

• 

  avehtari/BDA_m_demos: Bayesian Data Anal

• 

  四维彩超怎么看性别？四维看男孩女孩诀窍

热门话题

More+

2022-11-06
剪的笔顺,诠释剪的笔画,认识剪的部首

六六分期app的软件客服如何联系？(六六分期
2023-10-27

florent37/ViewAnimator: A fluent Android
2022-08-15

florent37/Shrine-MaterialDesign2: implem
2022-08-17

CVE-2020-36276
2022-09-23

SimpleSoftwareIO/simple-sms: Send and re
2022-08-13

阅读排行榜

1 六六分期app的软件客服如何联系？(六六分期

六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
阅读：18148|2023-10-27
2 可心卡盟:win10系统火狐flash插件崩溃怎么

今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
阅读：9634|2022-11-06
3 亲亲特价:怎么删除回收站图标

今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
阅读：8161|2022-11-06
4 济南大学虚拟社区:鲁大师节能降温的具体办

今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
阅读：8538|2022-11-06
5 xlueops.exe:无线网络安装向导

我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
阅读：8440|2022-11-06
6 女斗合众国:win7系统cf与主机连接不稳定怎

今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
阅读：9360|2022-11-06
7 0xc000022-[cf烟雾头]cf怎么调烟雾头

电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
阅读：8410|2022-11-06
8 qizideyouhuo:应用程序无法正常启动0xc0000

我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
阅读：7848|2022-11-06
9 ipz-185:win7系统vcf文件怎么打开

今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
阅读：8395|2022-11-06
10 傻哥蹦迪:win10系统s4怎么打开usb调试

今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
阅读：7387|2022-11-06

• 关于我们

  创业团队 加入我们 媒体报道 合作伙伴 公益事业

• 产品与服务

  寻求合作 项目投资 干货视频 经理人培训 招聘代理

• 解决方案

  一站式 制造业 教育科研 行业案例

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服

地址：深圳市南山区西丽大学城创智工业园

电邮：jeky_zhao#qq.com

移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap

返回顶部