webpack打包期国际化核心是静态注入语言包并生成多语言html文件，而非运行时fetch；需用html-webpack-plugin多实例输出、defineplugin或raw-loader预加载json，确保文案完整、路径正确、lang属性显式标注。
Webpack 打包阶段自动化处理国际化，核心不是“自动翻译”，而是把语言包注入构建流程、确保多语言 HTML 输出正确、避免运行时加载失败。手动拼接模板或靠 JS 运行时 fetch 语言包，在打包期就已失去控制力。
html-webpack-plugin 多实例输出不同语言 HTML
这是最稳妥的打包期多语言方案：每种语言生成独立 HTML 文件，资源路径自动注入，无运行时网络依赖。
- 每个
HtmlWebpackPlugin实例必须指定唯一filename（如index.zh-CN.html），否则会覆盖 -
templateParameters必须传入完整语言对象，不能只传 key；否则data-i18n标记在构建时无法解析 - 不要复用同一份 HTML 模板文件却期望它“自动适配语言”——模板里写的是占位符（如
<h1></h1>），不是data-i18n属性 - 若用 EJS 模板，
title等字段需与templateParameters键名严格一致；大小写、下划线都不能错
语言包 JSON 文件在打包时静态注入而非运行时 fetch
运行时 fetch('./locales/en-US.json') 在离线、CORS、路径错误时直接留空，用户看到的是 data-i18n="btn_submit" 原文。打包期注入则杜绝此类问题。
- 用
webpack.DefinePlugin将语言 JSON 内容转为全局常量，例如LOCALES_ZH_CN，在入口 JS 中直接引用 - 或用
raw-loader+require.context在构建时读取./locales/*.json，生成一个模块导出所有语言对象 - 注意 JSON 文件编码必须是 UTF-8 无 BOM，否则 Webpack 解析报错
Unexpected token in JSON - 键名不一致（如 zh.json 有
"submit"，en.json 写成"submit_btn"）会导致部分文案缺失，构建不报错但运行时留白
动态插入 DOM 的翻译必须在打包后仍可触发
打包本身不解决动态内容翻译，但可预埋机制：确保语言切换函数能被懒加载模块、AJAX 回调、第三方组件调用。
- 不要把翻译逻辑写死在某个入口文件里；应导出为独立工具函数（如
i18n.translate(el)），供任意模块 import - 若用
HtmlWebpackPlugin生成多个 HTML，每个页面的 JS 入口需根据当前 HTML 的语言码（如从document.documentElement.lang读取）自动加载对应语言数据 - 动态插入的
<select></select>、<option></option>、<svg><text></text></svg>需单独遍历处理，querySelectorAll('[data-i18n]')不会命中它们内部文本节点 - 打包产物中若含
eval或内联 script（如通过html-webpack-plugin的inject: 'body'插入），要确认其执行时机晚于语言初始化，否则document.documentElement.lang还没设
真正容易被忽略的点是：lang 属性必须显式写在每个语义化文本节点上，而不仅是 html 根标签。打包生成的 HTML 里如果只有 ，但 <p></p>、<h2></h2> 没带 lang，屏幕阅读器和浏览器字体 fallback 依然按默认语言处理——这和你打包做了什么都无关，是 HTML 规范层面的要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
