React部署AWS报错：html-webpack-plugin无法压缩生成的输出内容

架构老林

2026-10-19

问题根因

这个报错是生产构建阶段html-webpack-plugin默认开启HTML压缩功能时，待压缩的HTML内容存在语法错误，html-minifier-terser解析失败导致的。你本地npm start是开发模式，默认不会开启HTML压缩，另一个正常的CRA项目模板HTML符合规范所以不会触发报错。

解决步骤

优先核对本地与S3部署环境的差异：如果本地执行npm run build生产构建完全正常，仅S3部署时触发报错，先排查部署流水线的Node.js版本是否和本地一致、流水线是否有额外的HTML处理逻辑（比如注入环境变量时修改了HTML结构，导致出现语法错误）。
排查public/index.html模板文件的语法问题：重点检查是否存在未闭合的标签、未配对的引号、非法特殊字符，报错日志指向Parse Error: React App，可优先核对页面title、头部meta标签的写法是否符合规范。
若确认HTML语法无问题，可手动关闭HTML压缩功能：
- 未执行eject的CRA项目：可通过craco或react-app-rewired工具覆盖webpack配置，给HtmlWebpackPlugin添加配置项minify: false
- 已执行eject的CRA项目：直接修改config/webpack.config.js中HtmlWebpackPlugin的对应配置，示例如下：
```
new HtmlWebpackPlugin({
  // 其余原有配置保持不变
  minify: false
})
```
配置修改完成后重新执行npm run build，确认本地生产构建无报错后，再将产物部署到S3即可。