Webpack接入eslint-webpack-plugin无HTML格式检查报告输出问题

按影响优先级排序，核心问题主要有4个：

1. 插件职责重叠，实际产生警告的并非目标插件 #

你给ForkTsCheckerWebpackPlugin单独配置了ESLint扫描规则，指定检查src/**/*.{ts,tsx}范围，控制台看到的let test = 5类未使用变量警告，完全是fork插件内部集成的ESLint逻辑输出的，你配置的ESLintPlugin全程没有实际执行业务文件扫描，自然不会触发报告生成流程。

2. 报告格式化器配置写法不兼容 #

outputReport.formatter你写的是大写HTML，部分版本的eslint-webpack-plugin对格式化器名称是严格大小写匹配的，内置的HTML格式化器注册的键名是小写html，写大写会导致插件加载不到对应格式化器，静默跳过报告写入流程。

3. 输出路径存在基准歧义 #

outputReport.filePath的路径基准是Webpack配置中output.path指向的物理目录，你当前output.path是项目下的dist目录，配置的相对路径'../typeCheckReport.html'实际指向项目根目录，且没有做路径转义，一旦Dev Server的运行工作目录发生变化，生成的文件会落在完全找不到的位置，看起来就像报告没生成。

4. ESLintPlugin缺少明确的扫描规则声明 #

当前配置的ESLintPlugin只写了报告输出规则，没有明确声明需要扫描的文件范围，部分版本下插件默认匹配规则和现有babel-loader的扫描范围不匹配，会直接跳过文件检查流程。

• 拆分两个插件的职责，移除ForkTsCheckerWebpackPlugin中的ESLint配置块，让fork插件只负责TypeScript类型校验，把ESLint检查的任务完全移交eslint-webpack-plugin，避免重复扫描、日志冲突：

  new ForkTsCheckerWebpackPlugin({
    typescript: {
      configFile: path.resolve(__dirname, 'tsconfig.json')
    }
  })
  

• 调整ESLintPlugin配置，和扫描范围、格式化器、输出路径保持兼容：

  new ESLintPlugin({
    extensions: ['ts', 'tsx', 'js', 'jsx'],
    files: 'src/**/*.{ts,tsx,js,jsx}',
    exclude: 'node_modules',
    failOnWarning: true,
    outputReport: {
      formatter: 'html',
      // 直接用绝对路径，消除相对路径的基准歧义
      filePath: path.resolve(__dirname, './typeCheckReport.html')
    }
  })
  

• 重启Dev Server，观察终端输出的ESLint插件运行日志，确认能正常识别到代码中的检查警告后，查看指定的绝对路径下是否生成HTML格式的报告。
• 开发环境配置调试通过后，将调整后的ESLint插件配置原样迁移到生产环境Webpack配置中即可。

• 禁止同时让两个插件运行ESLint检查流程，否则会导致编译耗时翻倍，还会出现控制台日志和生成报告内容不一致的问题。
• 生产环境下生成报告的路径建议配置为项目根目录下的固定可访问路径，方便后续流程收集检查结果。
• 如果调整配置后报告仍未生成，可以临时开启ESLintPlugin的emitWarning: true、emitError: true配置，打印插件运行时的隐性报错，排查是否存在ESLint配置文件缺失、格式化器加载失败等静默问题。

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