html-webpack-plugin的html质量检查应通过beforeemit和alterassettags钩子在构建中拦截校验：beforeemit检查最终html字符串，alterassettags校验script/link标签完整性与sri属性，需区分环境并覆盖head/body双区域。
html-webpack-plugin 的 hooks 怎么用做 HTML 质量检查
不能靠事后 lint HTML 文件，得在 Webpack 构建过程中拦截 HTML 生成环节。关键不是改模板，而是利用插件提供的生命周期钩子，在 HTML 内容定稿前做校验。
最实用的是 beforeEmit 和 alterAssetTags 这两个钩子：beforeEmit 拿到最终 HTML 字符串，适合做语法/结构检查；alterAssetTags 拿到所有 <script></script> 和 <link> 标签对象，适合做资源路径、完整性、加载策略等校验。
-
beforeEmit钩子接收compilation.assets，其中assets[options.filename]是即将写入磁盘的 HTML 内容 - 不要直接修改
assets[options.filename].source()返回值来“修复”，那会掩盖问题——应该抛出错误中断构建 - 如果用正则匹配
<script></script>标签，注意它可能跨多行，别用/<script.>/s</script.>这种简单写法，容易漏掉换行或注释干扰
如何检测 script 标签缺失 integrity 属性
Webpack 默认不加 SRI（Subresource Integrity），但生产环境必须强制校验。不能只靠 webpack-subresource-integrity 插件，得自己验证是否生效。
在 alterAssetTags 钩子里遍历所有 script 标签对象，检查 tag.attributes.integrity 是否存在且非空：
hooks.alterAssetTags.tapAsync('SRIValidator', (pluginArgs, callback) => {
pluginArgs.headTags.forEach(tag => {
if (tag.tagName === 'script' && !tag.attributes.integrity) {
throw new Error(`Missing integrity for script: ${tag.attributes.src}`);
}
});
callback();
});
- 注意：只有启用
subresourceIntegrity: true选项时，html-webpack-plugin才会生成integrity属性，否则tag.attributes.integrity永远是undefined - 开发环境通常禁用 SRI，所以校验逻辑需结合
process.env.NODE_ENV === 'production'判断 -
headTags和bodyTags是分开的，漏查bodyTags会导致内联脚本逃逸
为什么 inject: 'body' 时 meta 标签可能被注入到错误位置
当配置 inject: 'body'，html-webpack-plugin 默认把所有标签（包括 <meta>）都塞进 开头，这违反 HTML 规范，会导致 SEO 和渲染异常。
- HTML 标准要求
<meta>必须在内，浏览器遇到 body 里的 meta 会忽略或降级处理 - 插件不会自动识别
<meta>类型并重定向插入位置，它只按inject配置统一处理 - 解决方案不是改
inject，而是用template显式声明区域，并在模板里用...手动控制 - 或者用
html-webpack-plugin提供的htmlWebpackPlugin.tags对象，在自定义模板中分区域渲染
ESLint 能否检查 HTML 模板里的 JS 代码
不能直接检查，因为 EJS/Pug 模板里的 JS 片段（如 ）不是标准 JS 语法，ESLint 解析器会报错。
- 可行方案是提取模板中的 JS 逻辑块，用
acorn或@babel/parser单独解析后喂给 ESLint，但成本高、易误报 - 更实际的做法：禁止在模板里写复杂逻辑，把判断逻辑抽成 helper 函数，放在独立 JS 文件里，由 ESLint 正常检查
- 如果非要检查，可用
eslint-plugin-html，但它只支持内联<script></script>，对 EJS 表达式无能为力 - 真正要拦住的是模板里出现
eval()、innerHTML =这类高危操作，这类应靠自定义beforeEmit钩子用字符串扫描拦截
HTML 质量前置拦截真正的难点不在技术实现，而在于边界划分：哪些该由 Webpack 插件拦，哪些该由编辑器实时提示，哪些必须进 CI 流水线。比如标签闭合错误适合在 beforeEmit 抛错，但 class 名拼写错误就得靠 IDE 的 HTMLHint 插件——混用工具链时，最容易漏掉的是钩子执行时机与资源缓存之间的竞态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
