在html-webpack-plugin中为脚本标签添加onerror事件处理

html-webpack-plugin是一个强大的Webpack插件，它能够自动生成HTML文件并注入打包后的资源。在实际开发中，我们有时需要为生成的脚本标签添加自定义属性或事件处理函数，比如onerror事件来捕获脚本加载失败的情况。

为什么需要onerror事件处理

当浏览器加载外部JavaScript文件时，可能会因为网络问题、路径错误等原因导致加载失败。通过为script标签添加onerror事件处理函数，我们可以：

1. 优雅地处理脚本加载失败的情况
2. 提供备用方案或显示友好的错误提示
3. 收集前端错误日志，便于排查问题

实现方法

html-webpack-plugin提供了强大的钩子机制，允许我们在HTML生成的不同阶段进行自定义修改。要为生成的script标签添加onerror属性，我们可以创建一个自定义插件：

class ScriptErrorHandlerPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('ScriptErrorHandlerPlugin', (compilation) => {
      compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(
        'ScriptErrorHandlerPlugin',
        (data, cb) => {
          // 遍历所有脚本标签
          data.body.forEach((tag) => {
            if (tag.tagName === 'script' && tag.attributes) {
              // 添加onerror属性
              tag.attributes.onerror = 'handleScriptError()';
            }
          });
          cb(null, data);
        }
      );
    });
  }
}

然后在webpack配置中使用这个插件：

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new ScriptErrorHandlerPlugin()
  ]
};

高级用法

如果需要更灵活的控制，可以结合html-webpack-plugin的beforeEmit钩子，直接操作生成的HTML字符串：

compiler.hooks.compilation.tap('ScriptErrorHandlerPlugin', (compilation) => {
  compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tapAsync(
    'ScriptErrorHandlerPlugin',
    (data, cb) => {
      data.html = data.html.replace(
        /<script(.*?)>/g,
        '<script$1 onerror="handleScriptError()">'
      );
      cb(null, data);
    }
  );
});

注意事项

1. 确保全局作用域中定义了handleScriptError函数
2. 考虑使用更现代的error事件监听方式，如addEventListener
3. 在生产环境中，错误处理函数应该经过压缩和优化
4. 对于动态加载的脚本，可能需要额外的错误处理机制

通过这种方式，我们可以为html-webpack-plugin生成的脚本添加健壮的错误处理机制，提升Web应用的可靠性。