依赖旧版Webpack的第三方包导致升级v5后ESLint测试失败如何解决

正常构建时Node.js模块解析机制会优先加载第三方依赖自身node_modules下的webpack v3版本，因此运行无异常。而eslint-import-resolver-webpack为了统一解析项目导入路径，默认会加载根项目的webpack v5实例加载配置，导致第三方依赖中调用NamedModulesPlugin的逻辑拿到已移除该API的webpack版本，触发报错。

• 方案1：配置ESLint忽略目标第三方依赖
  在项目.eslintrc配置文件的settings字段中添加import/ignore规则，跳过对该第三方依赖的内部导入解析：

{
  "settings": {
    "import/ignore": ["node_modules/[问题依赖的包名]"]
  }
}

该方案改动最小，不影响项目其他逻辑，优先推荐使用。

• 方案2：对webpack实例做兼容补丁
  在项目webpack配置文件最顶部添加兼容逻辑，给webpack v5手动补全已移除的API，空实现即可不影响实际功能：

const webpack = require('webpack');

if (!webpack.NamedModulesPlugin) {
  webpack.NamedModulesPlugin = class NamedModulesPlugin {
    apply(compiler) {
      // Webpack5默认已内置named modules能力，无需额外逻辑
      compiler.options.optimization.namedModules = true;
    }
  };
}

• 方案3：强制第三方依赖加载自身的webpack版本
  如果需要保留对该依赖的ESLint解析，可以使用patch-package给该第三方依赖打补丁，修改其内部引用webpack的逻辑，强制从自身目录下加载：

// 将原依赖内的 const webpack = require('webpack') 替换为
const webpack = require(require.resolve('webpack', { paths: [__dirname] }))

• 方案4：给ESLint指定独立的webpack配置
  新建一份简化版的webpack配置文件webpack.eslint.config.js，去掉会触发问题的插件逻辑，然后在.eslintrc中指定ESLint使用该配置：

{
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "./webpack.eslint.config.js"
      }
    }
  }
}

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