ESLint报错：html-webpack-plugin应在dependencies而非devDependencies求解析

我来帮你把这个问题拆解清楚，先从规则本身说起：

什么是import/no-extraneous-dependencies规则？ #

这个规则是ESLint import插件提供的核心校验规则，它的核心作用是确保你代码里引入（不管是require还是import）的第三方模块，都在项目package.json的依赖声明里，并且处于正确的分类中。

举个直观的例子：

• 如果你在生产环境会运行的业务代码里，引用了一个只放在devDependencies里的包，它会报错——因为业务代码要打包上线，依赖应该归类到dependencies；
• 如果你引用了一个根本没在package.json里声明的包，它也会报错，防止你不小心用了没安装的依赖。

简单说，它就是个「依赖合规检查员」，帮你避免项目依赖管理出现混乱。

为什么你的require语句会触发报错？ #

你是在Webpack配置文件里引入html-webpack-plugin，而这个插件本身确实应该放在devDependencies里——问题出在你继承的airbnb规则集的默认逻辑上：

Airbnb的import/no-extraneous-dependencies规则默认有个限定：只有特定的开发工具类文件（比如*.config.js、测试文件、脚本文件等），才允许引用devDependencies中的包；对于普通的.js文件，它默认认定是业务代码，只能引用dependencies里的包。

但你的ESLint配置里，没有明确告诉ESLint「我的Webpack配置文件属于开发工具类文件，可以放宽依赖检查」。所以ESLint把你的Webpack配置文件当成了普通业务代码，看到你引用了devDependencies里的html-webpack-plugin，就触发了这个报错。

再看你的.eslintrc.json：你开启了node环境、继承了airbnb规则，但airbnb不会自动识别你的Webpack配置文件，需要你手动给这个规则添加例外。

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