使用HtmlWebpackPlugin注入自定义脚本失败，是否配置有误？

1. 模板文件后缀与语法解析问题 #

HtmlWebpackPlugin默认使用EJS模板语法，但如果你的模板文件是.html后缀，webpack可能不会自动启用EJS解析器，导致<%= %>语法被当作普通文本处理。

解决方法：

• 将模板文件后缀改为.ejs，同时修改webpack配置中的template路径为IndexFile/index.ejs
• 或者显式指定模板loader，配置写法为template: '!!ejs-loader!IndexFile/index.html'（需先安装依赖：npm install ejs-loader --save-dev）

2. templateParameters配置错误 #

检查webpack.config.ts中变量是否正确传入，TypeScript环境下确保配置对象结构正确：

正确配置示例：

import HtmlWebpackPlugin from 'html-webpack-plugin';

export default {
  // 其他webpack配置...
  plugins: [
    new HtmlWebpackPlugin({
      template: './IndexFile/index.html',
      templateParameters: {
        customScript: '<script src="myscript.js"></script>'
      }
    })
  ]
};

若使用函数形式的templateParameters，需确保返回包含目标变量的对象：

templateParameters: (compilation, assets, options) => {
  return {
    customScript: '<script src="myscript.js"></script>',
    // 如需保留默认参数可解构：...assets, ...options
  };
}

3. 版本兼容问题 #

旧版本HtmlWebpackPlugin可能对templateParameters处理有差异，尝试更新到最新稳定版：

npm update html-webpack-plugin

4. 模板路径正确性检查 #

确认template配置的路径是相对于webpack配置文件的正确路径，比如配置文件在项目根目录时，路径应写为./IndexFile/index.html（开头的./避免路径解析错误）。

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