html-webpack-plugin 的 templateparameters 传环境变量需显式暴露，如用 defineplugin 注入 process.env.node_env 和其他变量；ejs 模板中条件判断应使用 避免空值报错，且注意语法闭合与空格判断。
html-webpack-plugin 的 templateParameters 怎么传环境变量
直接在 templateParameters 里写 process.env.NODE_ENV 是最常用也最稳妥的方式，但要注意：Webpack 默认不会把环境变量注入到构建上下文中，必须显式暴露。
常见错误是直接写 env: process.env.NODE_ENV 却没配置 DefinePlugin 或 mode，导致模板里拿到的是 undefined。
- 确保 Webpack 配置中已设置
mode: 'production'或'development'，否则process.env.NODE_ENV在构建时可能为空字符串 - 若需额外变量（如
API_BASE_URL），必须用webpack.DefinePlugin注入，例如：new webpack.DefinePlugin({ 'process.env.API_BASE_URL': JSON.stringify(process.env.API_BASE_URL) }) -
templateParameters函数形式更灵活，可做预处理：templateParameters: (compilation, assets, options) => ({ env: compilation.mode, ... })
EJS 模板里怎么写 if 判断才不报错
EJS 的条件语法是 + ，不是 。少一个括号或花括号，编译就失败，且错误信息常指向“unexpected token”，实际是语法闭合问题。
容易踩的坑集中在变量访问和空值判断上：
- 不要写
—— 如果data.user是undefined，会抛Cannot read property 'name' of undefined - 正确写法是
（Node.js ≥14.0）或更兼容的 - 字符串空值判断别只用
if (str)，因为" "（空格）也会被判定为真；需要if (str && str.trim()) 只用于输出，不能嵌套逻辑；条件块内要用 <code> 开头，输出内容再切回 <code>
多个环境共用一个模板时，CSS 类名怎么动态切换
靠 JS 动态加 class 是客户端行为，不符合“服务端预渲染”的前提；真正多环境条件渲染，得在模板里直接生成最终 class 字符串。
比如 dark mode 开关、部署环境标识、AB 测试分组，都应在构建时决定：
- 模板中写：
- 避免拼接错误：不要用
+=或多次，否则空格易出错；建议封装成函数传入 <code>templateParameters，例如：classNames: (a, b) => [a, b].filter(Boolean).join(' ')，然后模板里调用 - 注意 HTML 属性值必须被引号包裹，
class=缺引号会导致解析失败 —— 正确是class=""
为什么本地开发能渲染，CI 构建却空白或报错
根本原因通常是环境变量未透传或模板路径不一致。CI 环境默认不继承本地 shell 的 process.env，且工作目录、文件权限、Node 版本都可能不同。
排查重点：
- 检查 CI 脚本是否显式设置了
NODE_ENV=production（或对应环境），否则process.env.NODE_ENV是undefined - 确认
template路径是相对webpack.config.js的，不是相对于 CI 工作目录；推荐用path.resolve(__dirname, 'src/index.ejs') - EJS 模板里用了本地 Node 特性（如
?.、??），但 CI 的 Node 版本低于 14 —— 改用传统三元或typeof判断 - Webpack 插件版本差异：老版本
html-webpack-plugin@4的templateParameters是函数，新版本@5支持对象或函数，混用会静默失效
最隐蔽的问题是：EJS 编译错误不中断构建，默认只 warn，页面却渲染为空白 —— 建议在 webpack.config.js 中加 cache: false 和 minify: false 方便定位模板语法位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
