HTML Bundler Webpack Plugin source标签缺失闭合符错误求助

可能的问题点及排查步骤 #

1. EJS模板语法冲突 #

HTML Bundler Webpack Plugin对EJS的解析逻辑和旧插件存在差异，重点排查以下情况：

• 检查source标签属性中的EJS变量，比如<%= image.src %>这类，确认变量渲染后不会携带>、未转义引号等非法字符，这类字符会直接破坏标签结构。
• 禁止在HTML标签内部拆分插入EJS逻辑块，比如以下错误写法要绝对避免：

  <source src="img.jpg" <!-- <% if (condition) { %> type="image/webp" <% } %> >>
  

  逻辑块需放在标签外部或完整包裹属性，不能拆碎标签结构。

2. 插件对标签解析要求更严格 #

虽然HTML5允许source标签省略闭合符，但该插件可能有特殊规则：

• 统一source标签写法，要么全用自闭合格式<source ... />，要么全用HTML5标准格式<source ...>，禁止混合使用。
• 所有属性必须添加引号，禁止写src=img.webp这类无引号格式，统一写成src="img.webp"（单双引号保持一致即可）。

3. 模板文件隐藏字符问题 #

• 用VS Code打开insects-gallery.ejs，跳转到4714行附近，开启「显示控制字符」功能（点击左下角状态栏的"CRLF"旁选项），排查是否存在全角空格、异常换行符等不可见字符，这类字符会悄悄破坏标签结构。
• 将4714行前后的代码复制到浏览器开发者工具的HTML检查器中，进行语法验证，肉眼遗漏的问题工具能快速检测出来。

4. Webpack配置一致性检查 #

• 检查webpack.config中HTML Bundler的entry配置，确保画廊页面的路径和其他页面一致，避免单独添加特殊规则。示例配置：

  module.exports = {
    plugins: [
      new HtmlBundlerPlugin({
        entry: {
          index: './src/pages/index.ejs',
          insects: './src/pages/insects-gallery.ejs', // 路径需和其他页面保持统一
        },
        // 避免给画廊页面单独设置差异化配置
      }),
    ],
  };
  

• 排查是否给EJS文件配置了多余的loader（比如自动转义类插件），这类插件可能会篡改标签内的字符。

5. 清理缓存重试 #

• 删除node_modules/.cache目录，或者执行webpack --no-cache命令重新构建，旧缓存可能会引发无规律的解析异常。

快速定位测试方法 #

• 临时将insects-gallery.ejs中的source标签替换为静态内容，比如<source src="test.webp" type="image/webp">，重新构建。如果不再报错，说明问题出在动态变量渲染上，可逐个排查变量内容。
• 通过注释部分source标签的方式，逐步缩小范围，快速定位到具体出错的标签行。

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