介绍
hyperhtml-loader 是一个基于 hyperHTML 框架的 Webpack 加载器。如果你正在使用 hyperHTML，这个加载器的作用就是将 .html 文件转化成 hyperHTML 的模板，这样在 JavaScript 中引用这个模板就可以直接使用了。
本文将详细介绍如何使用 hyperhtml-loader，包括安装和基本用法，以及一些常见问题的解决方案。
安装
安装 hyperhtml-loader 只需要在终端中输入以下命令：
npm install hyperhtml-loader --save-dev
常用配置
下面是 hyperhtml-loader 的常用配置，这些参数都可以在 Webpack 配置文件中使用：
esModule：是否将模板导入为 ES6 模块，默认为 true；minimize：是否最小化 HTML 代码（去除冗余空格、注释等），默认为 false；root：当前模板的根路径；context：模板的上下文路径；attrs：自定义 HTML 属性，例如 class、id 等；tagging：为模板添加 HTML 标签。
基本用法
- 在 Webpack 配置文件中添加 hyperhtml-loader 的配置：
-- -------------------- ---- -------
------- -
------ -
-
----- ----------
------- -------------------
-------- -
------ ----------- -------------
--------- -----
-------- ------- --------------
-
-
-
-上面的配置会将 .html 文件转化成 hyperHTML 的模板，并且定义了一些参数。
- 在 JavaScript 代码中使用转化后的模板：
import tempalte from './file.html'; document.body.appendChild(template());
这样就可以在浏览器中展示 file.html 文件的内容了。
常见问题解决方案
问题 1：为什么在 JavaScript 中引入模板时会出现 undefined？
这是因为 hyperHTML 不会在模板中使用 module.exports 或 export default 等语句来导出模板，而是使用 module.exports = function () { return hyperHTML.bind(document.createElement('div')); 来绑定模板。所以，我们在 JavaScript 中引入模板应该这样写：
import template from './file.html'; console.log(template()); // 输出模板 HTML 内容
问题 2：为什么在模板中使用自定义标签会出现“unknown element”的错误？
这是因为浏览器不认识自定义标签，需要在模板中定义自定义标签：
-- -------------------- ---- -------
------
------
----------------------
------- --------------
------ --------- ---- ------------
--------------------------------------- ----- ------- ----------- -
------------------- -
-------------- - ------- --------
-
---
----- -------- - ---------------------------------------------
-------------------------------------------
---------
-------
------
---------------------------------
----------
---------------------------------
-----------
-------
-------以上就是对 npm 包 hyperhtml-loader 的一个详细介绍，希望对大家的学习和应用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596081e8991b448d6cf2