HTML“打包”指ZIP归档或内联资源生成单HTML文件：ZIP保结构易维护，单HTML便携但体积大兼容性差；JSZip前端打包需注意中文路径、二进制内容和兼容性；内联方案须用工具链避免路径错误，Webpack构建需正确配置minify对象才能生效。
HTML 本身不是可执行程序，所谓“打包成一个文件”，实际是指把 HTML、CSS、JS、图片等资源聚合成单个可分发的载体——常见做法是 ZIP 归档，或内联所有依赖生成单 HTML 文件（index.html）。二者目的不同：ZIP 保结构、易维护；单 HTML 便携、免服务器，但有体积和兼容性代价。
用 JSZip 把多个 HTML/CSS/JS 打包成 ZIP
前端直接生成 ZIP 最常用方案，适合作品集导出、代码快照等场景。关键不是“能不能”，而是中文路径、二进制内容、浏览器兼容性这三点容易翻车。
-
zip.file()传文本内容时，必须用字符串（document.body.outerHTML可取，但别传document对象） - 中文文件名在 Safari/iOS 上大概率乱码，得靠
FileSaver.js+ UTF-8 编码补丁，或干脆用英文命名 -
zip.generateAsync({type: "blob"})是唯一可靠方式，generate()已废弃，调用即报错 - 大文件（>50MB）会卡死主线程，建议加 loading 提示，或切后端生成
把 CSS/JS 内联进 HTML 生成单文件
目标是让 index.html 独立运行，不依赖外部资源。这不是压缩，而是资源迁移——手动做极易漏样式或破坏相对路径，推荐工具链处理。
- 用
html-inline-css-jsCLI：它会解析<link rel="stylesheet">和<script src>，自动读取并内联，同时保留<pre>和<textarea>内容原样 - 内联后体积必然增大，尤其带 base64 图片时；需权衡“免服务器”和“首屏加载慢”的取舍
- Webpack 用户可用
html-webpack-plugin配合inline-source-webpack-plugin，但注意它不处理动态 import 的 chunk - 内联 JS 里若有
import.meta.url或new URL("xxx", import.meta.url)，运行时会失效——这些路径引用必须提前转为绝对 URL 或 data URI
Webpack 构建时打包 HTML 并压缩结构
多数现代项目走这条路，本质是构建阶段生成最终 HTML，并顺手删空格、去注释、精简属性。但配置错就等于没压，且错误静默无提示。
立即学习“前端免费学习笔记（深入）”；
-
html-webpack-plugin在 Webpack 5+ 中默认不压缩，minify: true已废弃，必须传对象：minify: { collapseWhitespace: true, removeComments: true } -
collapseWhitespace: true会吃掉标签间换行，但<pre>、<code>、white-space: pre-wrap元素内的空白不受影响——这是设计行为，不是 bug -
removeOptionalTags: true删</html>、</head>等，IE8 及更旧浏览器会白屏，若项目还支持，务必关掉 - 和
mini-css-extract-plugin配合时，minifyCSS: true只在 CSS 被提取为外链时生效；开发模式下 CSS fallback 为内联，则此选项无效
真正难的不是“怎么打包”，而是打包后是否还能正确加载、渲染、交互。单 HTML 文件里内联了 10 个 JS 模块，某个模块用了 ?. 语法，而 html-minifier-terser 的 minifyJS: true 又没关，上线就报 Unexpected token '.'——这种链路断裂，只靠看体积数字发现不了。
