HTML质量检查应在pre-build钩子执行，因错误在模板编译后才暴露，前置校验可拦截源头；Webpack用beforeCompile/compile、Vite用buildStart、Next.js需单独处理getStaticProps生成内容。
构建钩子本身不校验 HTML 代码质量，它只是执行时机；真正起作用的是你挂载在钩子上的检查工具——比如 html-validate、tidy 或自定义的 DOM 解析脚本。
为什么 pre-build 钩子比 post-build 更适合 HTML 质量检查
HTML 错误（如未闭合标签、非法嵌套、缺失 alt）往往在模板编译后才暴露，但等生成完再报错，修复成本高、反馈延迟。把检查前置到构建前（pre-build），能拦截问题源头。
- Webpack 用户：应在
beforeCompile或compile钩子触发前运行校验，避免污染构建缓存 - Vite 用户：利用
buildStart钩子，在解析入口 HTML 前扫描所有.html模板文件 - Next.js 用户：注意
getStaticProps生成的 HTML 不走构建钩子，需单独用postbuild+playwright做 DOM 断言
html-webpack-plugin 的 alterAssetTags 钩子不是质量检查点
这个钩子只负责修改已生成的 <link> 和 <script> 标签，不涉及语义合法性判断。强行在这里做 lint 会干扰资源注入逻辑，且无法捕获模板语法错误（如 {{ missing-closing-brace）。
- 正确做法：用
beforeEmit钩子读取最终data.html字符串，传给html-validate实例校验 - 常见坑：
data.html可能含占位符（如[name]），需先替换或配置html-validate忽略规则 - 性能影响：每次构建都全量校验所有 HTML 文件会拖慢速度，建议只校验变更文件（通过
compiler.watchFileSystem获取 changed files）
如何让 HTML 校验结果中断构建流程
默认情况下，校验失败仅输出警告，不会终止构建。必须显式抛出错误或调用 callback 传参非空 error 对象。
立即学习“前端免费学习笔记（深入）”；
- Webpack 插件写法：
hooks.beforeEmit.tapAsync('HtmlValidate', (data, callback) => { if (errors.length) callback(new Error('HTML validation failed')); else callback(null, data); }) - CLI 工具集成：用
html-validate --no-color --output-format json src/*.html | jq '.length > 0' -e作 shell 判断，配合set -e中断 - 注意：Webpack 5+ 的
compilation.errors不自动阻断构建，必须靠callback或throw
HTML 质量检查真正的难点不在钩子注册，而在规则收敛——不同框架生成的 HTML 结构差异大（如 Vue 的 v-if、React 的 JSX 输出），同一份 html-validate 配置很难覆盖全部场景。建议按项目模板类型拆分校验配置，并把规则固化进 CI 的 .htmlvalidate.json，而非依赖开发机本地设置。
