前言
在前端开发中，经常会用到 HTML 模板文件，为了让 HTML 文件有更好的可读性和可维护性，我们需要对其进行格式化。手动格式化当然是可行的，但是随着项目规模的增大，手动处理无疑会极大地消耗时间和精力。而 HTML Beautify Loader 恰好提供了一种自动化的解决方案。
HTML Beautify Loader 是一个 Webpack Loader，在 Webpack 打包时可以自动格式化 HTML 文件。本文就为大家介绍 HTML Beautify Loader 的使用方法。
安装
首先，我们需要安装 HTML Beautify Loader ，在项目根目录中运行如下命令：
npm install html-beautify-loader --save-dev
配置
安装成功后，我们需要配置 webpack.config.js 文件来开启 HTML Beautify Loader。在对应的 loader 中进行配置即可：
-- -------------------- ---- -------
------- -
------ -
-
----- ----------
---- --
------- -----------------------
-------- -
-- -------- --
-
--
-
-
-以上配置会将 HTML 所有标签的属性转成小写、删除多余空格和删除空属性。更多配置选项可以查看 html-beautify 的文档。
示例代码
为了更好地理解 HTML Beautify Loader，下面给出一个基本的示例：
index.html
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- -------- --------------
-------
------
---- ------------------
--------- ----------
------
-------
-------webpack.config.js
-- -------------------- ---- -------
------- -
------ -
-
----- ----------
---- --
------- -----------------------
-------- -
------------ --
------------ - -
-
--
-
-
-运行 npm run build 后， HTML 将会被格式化为：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- -------- --------------
-------
------
---- ------------------
---
------ ------
----
------
-------
-------学习和指导意义
HTML Beautify Loader 是一个非常实用的工具，在前端开发中能够极大地提升效率。通过格式化 HTML，代码可读性和可维护性都会得到很大的提升。同时，在使用 Loader 时，我们也学习到了如何在 Webpack 中使用 Loader，并掌握了一种非常常用的工具。
总之，我们应该在实际工作中运用各种工具加速开发，提升效率，提高代码质量，以更好地服务公司和用户。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663781e8991b448e22c5