安装Webpack@4.6.0遇UNMET PEER DEPENDENCY无效依赖报错求助

嘿，这个问题我之前帮不少人解决过——核心就是版本不兼容闹的！你安装的webpack@4.6.0版本太高，而项目里现有的babel-loader@6.4.1、webpack-dev-middleware@1.12.2这些旧依赖包，只支持webpack 1.x/2.x/3.x，完全不兼容webpack 4.x，所以npm才会抛出peer依赖未满足的警告，甚至标记webpack为invalid。

给你两个针对性的解决方案，按需选择：

方案一：降低webpack版本（快速适配旧依赖，改动最小） #

如果不想折腾升级其他依赖，只想让项目尽快跑起来，直接把webpack降到符合旧依赖要求的版本就行：

• 先卸载当前的webpack：

  npm uninstall -D webpack
  

• 安装兼容的webpack 3.x最新版（这个版本能完美匹配你现有依赖的peer要求）：

  npm install -D webpack@3.12.0
  

• 最后执行npm install，让npm自动处理剩余依赖的兼容问题，应该就能正常编译了。

方案二：升级依赖以兼容webpack 4.x（长远维护更友好） #

如果打算给项目做版本升级，让它适配webpack 4，那就要把那些不兼容的依赖包升级到支持webpack 4的版本：

• 升级babel-loader到7.x及以上（7+版本开始支持webpack 4）：

  npm install -D babel-loader@7.1.5
  

• 升级webpack-dev-middleware到3.x及以上：

  npm install -D webpack-dev-middleware@3.7.2
  

• 检查项目里其他webpack相关依赖（比如webpack-dev-server），也要升级到支持webpack 4的版本
• 最后重新安装webpack@4.6.0：

  npm install -D webpack@4.6.0
  

注意：升级后可能需要调整webpack配置文件，比如新增mode选项（development/production），还有一些插件的用法可能有变化，得对应修改。

小提示 #

• 用npm ls <包名>可以查看某个依赖的版本和它的peer依赖要求，比如npm ls babel-loader，能帮你快速确认兼容范围
• 如果项目里有package-lock.json或yarn.lock，建议先备份再删除，避免锁文件缓存的旧版本干扰新依赖安装

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