Webpack 配合 ESLint 在编译时报错的核心目标是让代码在打包前暴露语法/规范问题并中断构建，需确保 eslint-loader 通过 enforce: 'pre' 优先执行、删除已废弃配置项（如 extensions）、TS 项目启用 @typescript-eslint/parser 解析器，并区分 ESLint 规范检查与 TypeScript 类型检查职责。
Webpack 配合 ESLint 在编译时报错，核心目标是：让代码在打包前就暴露语法/规范问题，并中断构建流程。这需要三方面协同：正确安装、Loader 顺序合理、配置不越界。
确保 eslint-loader 正确集成且优先执行
webpack 默认 loader 执行顺序是从右到左、从下到上。如果 eslint-loader 写在 babel-loader 或 ts-loader 后面，它检查的其实是转译后的 JS，而非原始 TS/JS 源码——这就失去了意义。
必须用 enforce: 'pre' 强制它最先运行：
- 删除旧写法中靠位置控制顺序的方式（易出错、难维护）
- 在
module.rules中添加如下规则（注意路径需匹配你的src）：
{
enforce: 'pre',
test: /\.tsx?$/, // 同时覆盖 .ts 和 .tsx
exclude: /node_modules/,
include: path.resolve(__dirname, 'src'),
loader: 'eslint-loader',
options: {
emitWarning: false, // 设为 false 可让错误中断构建（默认 true 仅警告）
failOnError: true, // 显式要求报错时终止
}
}
避免已废弃配置项引发崩溃
常见报错如 Invalid Options: - Unknown options: extensions，说明你用了老版本 ESLint 配置中已被移除的字段（比如 extensions）。ESLint v8.20+ 已彻底移除该选项。
- 检查
.eslintrc.js或eslint.config.js，删掉所有extensions字段 - 文件类型过滤应交给 webpack 的
test正则（如/\.tsx?$/），而非 ESLint 自己管 - 若用的是 Flat Config（ESLint v9+），确认没有在
rules外层误传无效 key
TS 项目必须启用 typescript-eslint 解析器
纯 eslint-loader + JS 规则无法识别 TypeScript 语法（如接口、泛型、装饰器）。报错如 Module '"vue-router"' has no exported member 'createRouter' 往往是 ESLint 没走通 TS 类型解析链，导致 import 被当成无效引用。
- 安装必要包：
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin - 在 ESLint 配置中指定 parser 和插件：
module.exports = {
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended'
],
rules: {
'@typescript-eslint/no-unused-vars': 'error'
}
};
类型错误和 ESLint 错误要分清职责
Webpack 编译时报的 TS2305（类型导出不存在）属于 TypeScript 编译器范畴，不是 ESLint 能解决的。它说明 vue-router 版本与代码所用 API 不匹配。
- 先查
vue-router实际安装版本，再核对文档中createRouter的导出条件（例如 v4 不支持，v4.1+ 才有） - 确保
tsconfig.json中"noEmit": true，把输出完全交给 Webpack，避免 tsc 自行 emit 干扰 - ESLint 只负责代码规范与静态结构检查；类型合法性由 TypeScript 编译器或
fork-ts-checker-webpack-plugin保障
