HTML Webpack Plugin v5 templateParameters变量传递失效求助

问题根源 #

你配置了html-loader处理.html文件，导致HTML Webpack Plugin无法解析模板中的<%= %>插值语法——html-loader会把模板文件转成普通字符串，而非保留模板变量的替换逻辑。

解决方案 #

提供两种可选修复方式：

方案一：改用EJS模板文件

• 将src/index.html重命名为src/index.ejs
• 修改webpack.config.js中HtmlWebpackPlugin的template配置项为'./src/index.ejs'
• 保持模板中的<%= title %>不变，执行npm run build后，变量会被正确替换为对应语言的标题内容

方案二：调整html-loader配置兼容模板语法

在webpack.config.js的html-loader规则中添加interpolate选项，开启对EJS风格插值的支持：

module: {
  rules: [
    {
      test: /\.html$/i,
      loader: 'html-loader',
      options: {
        interpolate: true // 启用对<%= %>语法的解析
      }
    }
  ]
}

保持原有模板文件和配置不变，重新执行构建命令即可生效。

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