eslint 在 webpack 中需通过 eslint-webpack-plugin 插件集成，它在开发服务器启动、热更新及打包时自动执行代码检查；需安装 eslint 和 eslint-webpack-plugin，配置 plugins 数组启用，支持扩展名指定、自动修复、目录上下文及错误/警告输出控制。
在 Webpack 中集成 ESLint 并不是直接靠 Webpack 自身能力完成的，而是通过 eslint-webpack-plugin 这个官方推荐插件，在构建过程中自动触发 ESLint 检查。它会在开发服务器启动、代码变更热更新、以及打包时执行 lint，及时反馈不符合规范的代码。
安装 ESLint 及相关依赖
先确保项目中已初始化 ESLint 配置（如通过 npm init @eslint/config），再安装插件和 loader：
npm install --save-dev eslint eslint-webpack-plugin- 如果使用 TypeScript，额外安装：
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin - 若需在编译前拦截错误（比如阻止带 error 的代码进入浏览器），还需配置
webpack.config.js中的infrastructureLogging或配合eslint-loader（已废弃，不推荐）
在 webpack.config.js 中启用插件
在 module.exports 的 plugins 数组中添加 ESLintPlugin 实例：
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
// ... 其他配置
plugins: [
new ESLintPlugin({
extensions: ['js', 'jsx', 'ts', 'tsx'], // 检查哪些后缀文件
fix: true, // 是否自动修复可修复的问题（慎用于生产构建）
emitWarning: true, // 将 warning 输出为 webpack warning（不影响构建）
emitError: false, // 不将 error 当作 webpack error（避免构建失败）
failOnError: false, // 构建不因 lint error 中断（开发阶段友好）
context: './src', // 指定检查根目录
exclude: /node_modules/, // 排除 node_modules
}),
],
};
配合开发体验优化
让 ESLint 更贴合日常开发节奏：
- 在
devServer中开启overlay: true，可在浏览器全屏显示 lint 错误（需配合eslint-webpack-plugin的默认行为） - 若希望保存即检查，VS Code 用户建议同时安装 ESLint 扩展 并启用
"editor.codeActionsOnSave": {"source.fixAll.eslint": true} - CI/CD 中建议单独运行
npx eslint src/，而非依赖 Webpack 插件，更稳定可控
常见问题处理
遇到检查不生效或报错，可按顺序排查：
- 确认项目根目录存在
.eslintrc.js或.eslintrc.json，且配置了rules和env - 检查
eslint-webpack-plugin版本是否与 ESLint 8.x 或 9.x 兼容（v4+ 支持 ESLint v8.50+） - 若使用 TypeScript，确保
.eslintrc.js中正确设置了parser: '@typescript-eslint/parser'和plugins: ['@typescript-eslint'] - Webpack 5 默认启用持久化缓存，有时会跳过 lint；可临时加
cache: false测试是否为缓存导致
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
