html质量检查必须通过html-eslint或htmlhint等独立linter工具在ci中前置执行，而非依赖html-webpack-plugin的minify；后者仅压缩不校验，且webpack本身不支持html静态分析。
HTML代码质量检查必须在Webpack构建流程中做，而不是靠人工跑一次ESLint；否则CI阶段才发现问题，修复成本高、上线易阻塞。
html-webpack-plugin 本身不检查 HTML 质量，得靠 html-eslint 或 HTMLHint
很多人误以为 html-webpack-plugin 的 minify 选项能查语法或可访问性问题——它只压缩，不 lint。真正做质量检查的是独立的 Linter 工具：
-
html-eslint：基于 ESLint 生态，支持自定义规则、与.eslintrc.js统一管理，推荐用于 TypeScript/ESLint 已就绪的项目 -
HTMLHint：轻量、规则粒度细（比如attr-lowercase、id-unique），适合纯 HTML 项目或需要强结构约束的场景 - 二者都不直接集成进 Webpack 构建流水线，需通过
npm script或 CI 配置显式调用
在 webpack.config.js 里加 lint 是无效的，要走独立脚本
你不能在 webpack.config.js 的 plugins 或 module.rules 里“注册”一个 HTML Linter——Webpack loader 只处理内容转换（如 html-loader 解析 src 属性），不执行静态分析。
- 正确做法是把 lint 写成单独的
npm script，例如："lint:html": "eslint . --ext .html" - 然后在 CI 的 workflow 中，把它放在
webpack build之前执行，失败则中断流程 - 如果想在开发时自动检查，可用
lint-staged+ git hook，但注意它只检查暂存区文件，不覆盖全量扫描
html-loader 的 minimize 选项和 HTML 压缩不是一回事
html-loader 的 minimize 是个开关，背后实际调用的是 html-minifier-terser（非原始 html-minifier）。它只做体积优化，且默认行为保守：
- 默认不启用
removeComments，因为注释可能含构建指令（如<!-- htmlmin:ignore -->） - 默认不启用
collapseWhitespace，避免破坏内联pre或textarea内容格式 - 若手动传入
minimize: { collapseWhitespace: true, removeComments: true }，需确认模板中无依赖空白或注释的逻辑 - 这个压缩发生在模块解析阶段，和构建后对最终 HTML 文件的压缩（如
html-webpack-plugin的minify）是两层动作，别混用
html-webpack-plugin 的 minify 配置最容易被忽略的兼容性点
html-webpack-plugin 的 minify 选项在 v5+ 默认启用，但它的底层依赖是 html-minifier-terser，而该库对某些语法敏感：
- 遇到
<template></template>标签内含未转义的{（如 Vue 模板字符串），会报Parse Error: <template></template> - 使用 EJS 或 Nunjucks 模板时，若变量语法含
或 <code>{{，需配置ignoreCustomFragments正则绕过解析 - Webpack 5.80+ 对
minify的类型校验变严格，传入布尔值true会警告，必须传对象或false - 线上构建建议显式关闭
minify并交由html-minifier-terserCLI 单独跑，可控性更强
真正卡住团队的往往不是“怎么配”，而是 lint 规则没对齐、压缩破坏了模板语法、或 CI 里漏掉了 HTML 检查环节——这些点不写进脚本，光靠文档没人记得住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
