HtmlWebpackPlugin无法解析模板自定义变量，需在Angular ejected项目加随机变量

针对你在弹出（ejected）的Angular项目中遇到的HtmlWebpackPlugin自定义变量解析失败，以及需要添加随机变量的问题，我整理了以下实用解决方案：

1. 用正确的模板语法引用自定义变量 #

HtmlWebpackPlugin默认采用EJS模板语法解析变量，所以你必须在src/index.html里通过<%= htmlWebpackPlugin.options.你的变量名 %>的格式引用。比如要调用你配置的myHash，模板里要这么写：

<!-- 在模板中插入随机变量，比如给静态资源加缓存戳 -->
<link rel="stylesheet" href="styles.css?v=<%= htmlWebpackPlugin.options.myHash %>">

如果用{{myHash}}或其他非EJS语法，插件是无法识别的，这是很多人踩坑的点。

2. 完善你的HtmlWebpackPlugin配置 #

你的现有配置已经添加了myHash变量，但有几个细节需要补全和确认：

• 保持compile: true开启，这个选项是模板编译、变量解析的核心前提。
• 补全chunksSortMode函数，残缺的函数可能导致插件运行异常。比如可以写一个按业务需求排序chunk的函数：

new HtmlWebpackPlugin({
  filename: "./index.html",
  hash: false,
  inject: false,
  compile: true,
  favicon: false,
  minify: false,
  template: "./src/index.html",
  cache: true,
  showErrors: true,
  chunks: "all",
  excludeChunks: [],
  myHash: Math.random().toString(36).slice(2),
  xhtml: true,
  chunksSortMode: function sort(left, right) {
    // 按项目需求定义chunk加载顺序，比如polyfills优先于主代码
    const chunkPriority = ['polyfills', 'main'];
    const leftIndex = chunkPriority.indexOf(left.names[0]);
    const rightIndex = chunkPriority.indexOf(right.names[0]);
    return leftIndex - rightIndex;
  }
})

• 你用Math.random().toString(36).slice(2)生成随机串的逻辑是有效的，每次webpack构建时都会生成新的随机值，刚好满足缓存击穿的需求。

3. 排查可能的加载器冲突 #

如果变量还是无法解析，大概率是webpack配置中的其他加载器干扰了模板编译：

• 若你的项目配置了html-loader，它会提前处理模板中的EJS语法，导致HtmlWebpackPlugin无法识别。这时可以修改模板路径，强制使用EJS加载器处理：

template: "ejs!./src/index.html"

（如果没安装ejs-loader，先执行npm install ejs-loader --save-dev）

4. 快速调试变量是否传入 #

可以在模板中临时添加调试代码，查看所有可用的插件选项，确认变量是否正确传入：

<!-- 临时输出所有配置选项，调试完成后删除 -->
<%= JSON.stringify(htmlWebpackPlugin.options) %>

运行构建后查看生成的index.html，如果能看到myHash字段，说明变量已经传入，问题出在模板引用语法上；如果看不到，检查配置是否被webpack正确加载。

内容的提问来源于stack exchange，提问作者Pistolpete .