在现代 Web 开发中，前端构建工具越来越重要。Webpack 是一个常用的前端构建工具，可以将各种资源打包为一起，以便更好地管理，优化和部署网站。
在实际的开发工作中，前端开发人员通常会遇到各种各样的问题，特别是在处理 HTML 文件时。这就是 tidt-html-webpack-plugin 这个 npm 包帮助我们解决这些问题的地方。
什么是 tidy-html-webpack-plugin？
tidy-html-webpack-plugin 是一个 webpack 插件，它可以使用 LibTidy 将 HTML 或 XML 格式化为更加美观易读的格式。
该插件还可以帮助我们排除无用空格，将控制字符转换为实体字符，以及将标记小写化。
安装 tidy-html-webpack-plugin
要安装 tidy-html-webpack-plugin，您可以使用以下命令：
npm install tidy-html-webpack-plugin --save-dev
如何在 Webpack 中使用 tidy-html-webpack-plugin？
使用 tidy-html-webpack-plugin 的最简单方法是在 webpack 配置文件中添加插件。
-- -------------------- ---- -------
----- --------------------- - ------------------------------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
-------- -
--- ------------------------
--
--现在运行 webpack 构建您的应用程序，然后在 dist 目录中查看生成的 HTML 文件。请注意，HTML 变得更加美观易读，冗余空格也已被移除。
更高级的用法
除了默认的配置，tidy-html-webpack-plugin 还支持许多其他选项，以便您可以自定义格式优化工具的行为。
高度定制输出
默认情况下，tidy-html-webpack-plugin 将使用 tidy 执行两个步骤。第一个阶段使用 -i（indent）选项格式化输入，第二个阶段使用 -utf8 输出。
如果你需要额外的控制，你可以选择一条或多条选项来在 webpack 插件选项中启用 tidy。在这个例子中，我们使用了 -xml（输出 XML）选项。
new TidyHtmlWebpackPlugin({
tidy: {
outputXml: true,
},
}),改变选项
您可以在启用插件时向 tidy-html-webpack-plugin 传递选项。这些选项将在格式化工具中的选项之前应用。
new TidyHtmlWebpackPlugin({
options: {
indent_size: 2,
},
}),过滤
在某些情况下，您可能希望仅格式化特定的 HTML 文件而不是全部。这可以通过一个包含正则表达式的数组来实现。
new TidyHtmlWebpackPlugin({
onlyInclude: [
/index\.html$/,
/about\.html$/,
],
}),使用 exclude 字段来在特定目录中禁用 plugin。
new TidyHtmlWebpackPlugin({
exclude: [
path.resolve(__dirname, 'src/static/'),
],
}),结论
tidy-html-webpack-plugin 是一个非常有用的工具，可以帮助我们处理在 HTML 文件中遇到的许多常见问题。不仅可以格式化您的 HTML，还可以排除冗余空格，将控制字符转换为实体字符以及将标记转换为小写。
使用该工具优化您的代码可以使 HTML 更加易于读取和理解，从而提高生产力。无论您是新手还是老手，都应该考虑使用 tidy-html-webpack-plugin 优化您的 HTML 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057bbf81e8991b448eb981