html-webpack-plugin多语言输出必须配置多个实例，每个实例指定不同filename（如index.zh-CN.html）、统一template、对应language的templateParameters及显式chunks，否则将导致文件覆盖、渲染为空或资源注入错乱。
Webpack 项目里用 html-webpack-plugin 做多语言输出
直接靠单个 HtmlWebpackPlugin 实例无法自动切换语言，必须手动创建多个实例，每个对应一种语言的 HTML 输出。
常见错误现象：filename 写成 index.html 导致所有语言覆盖同一文件；templateParameters 传错对象导致模板里 {{ title }} 渲染为空；没配 chunks 导致 JS/CSS 注入错乱。
- 每种语言单独 new 一个
HtmlWebpackPlugin实例，filename必须带语言后缀，如index.zh-CN.html -
template路径统一指向一个基础模板（如src/index.html），避免维护多份 HTML 结构 -
templateParameters传入该语言对应的 JSON 对象，键名要和模板中插值语法一致（如 EJS 用<%= title %>，HTMLWebpackPlugin 默认用{{ title }}） - 如果用了 SplitChunks 或异步 chunk，务必在每个实例中显式配置
chunks，否则可能漏注入或注入重复资源
Vite 项目中如何动态生成多语言 HTML
Vite 没有内置类似 html-webpack-plugin 的多入口 HTML 支持，得靠插件或构建脚本补位。官方推荐方案是用 vite-plugin-html + 多次构建。
容易踩的坑：用 process.env.LANG 在 config 中读取语言，但 Vite 的 config 是 Node 环境执行的，无法感知浏览器语言；直接在 HTML 模板里写 document.documentElement.lang 切换，但静态 HTML 不会响应式更新。
立即学习“前端免费学习笔记（深入）”；
- 写一个构建脚本（如
build-i18n.js），遍历语言列表，每次调用vite build并传入不同环境变量，如LANG=zh-CN vite build - 配合
vite-plugin-html的inject选项，在每次构建时注入对应语言的title、lang和内联数据 - 模板中不要依赖运行时 JS 更新文本，所有文案必须在构建期完成替换，否则 SEO 和首屏不可见文本会出问题
- 注意 public 目录下的静态资源（如 favicon.ico）不会被自动复制到多语言子目录，需手动配置
rollupOptions.output.assetFileNames
Vue/React 项目里别让 html-webpack-plugin 和框架 i18n 冲突
框架层（如 vue-i18n 或 react-i18next）负责运行时文案切换，而 html-webpack-plugin 只管构建期生成的 HTML 骨架——两者职责不同，混用时容易互相覆盖。
典型问题：页面 <title> 由 html-webpack-plugin 注入，但框架 i18n 初始化晚于 DOM 渲染，导致标题仍是默认语言；或者 meta description 写死在模板里，没随语言变化。
-
html-webpack-plugin只处理静态元信息（<title>、<meta name="description">），这部分必须在构建时确定语言并注入 - 页面主体文案交给框架 i18n 管理，HTML 模板里只留占位结构，如
<h1>{{ $t('home.title') }}</h1> - 如果要用 SSR 或预渲染，确保服务端渲染时也传入正确的语言上下文，否则客户端 hydration 会 mismatch
- 避免在 HTML 模板里写
data-i18n标记再用 JS 扫描替换——这和框架的响应式翻译机制打架，且破坏 Vue/React 的响应链
语言包加载路径和 BCP 47 格式必须严格匹配
html-webpack-plugin 本身不处理语言包加载，但你传给它的 templateParameters 数据源，路径和命名规则直接影响可维护性。
常见错误：语言文件叫 zh.json，但用户语言是 zh-Hans，结果 fallback 失败；或者 webpack alias 指向了错误目录，导致构建时报 Cannot find module。
- 语言包文件名必须符合 BCP 47，如
zh-Hans.json、en-US.json，不能用zh_CN或chinese - webpack 配置里用
require()加载时，路径要写死或用变量拼接，避免用import()动态导入——构建期无法 resolve - 如果语言包放在
src/locales/下，确保它被 webpack 正确识别为模块（默认已支持），不要加多余 loader - 建议用对象解构方式传参，比如
templateParameters: { ...locales[lang], lang }，避免嵌套过深导致模板访问失败
lang 值错一位（比如 zh-CN 写成 zh-CN-），整个 HTML 的字体回退、标点间距、屏幕阅读器播报就全乱了。 
