npm WARN webpack-cli@3.3.11 requires a peer of webpack@4.x.x but none is installed. You must install

本文详细介绍了在安装webpack和webpack-cli时遇到的版本不匹配问题,解释了错误信息的含义,并提供了具体的解决步骤,包括如何指定版本进行安装。

安装webpack和webpack-cli时出现的问题:
npm WARN webpack-cli@3.3.11 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.

问题翻译::
NPMWA RNwebpack-cli@3.3.11需要一个webpack@4.x.x的对等点,但没有安装。您必须自己安装对等依赖项。

原因:
安装时命令:npm install webpack -g
npm install webpack-cli -g
默认安装了webpack最新版本,导致安装的最新脚手架webpack-cli与webpack版本不匹配,导致安装错误
解决:

  1. 指定webpack安装版本:
			npm install webpack@4.30.0 -g
  1. 指定webpack安装的版本如下:
			npm install webpack-cli@3.3.2 -g
  1. 安装成功:
PS D:\developer\IdeaProjects\itcast-nodejs> npm install webpack@4.30.0 -g
D:\developer\node.js\npm_modules\webpack -> D:\developer\node.js\npm_modules\node_modules\webpack\bin\webpack.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\webpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack@4.30.0
added 323 packages from 198 contributors in 27.276s
PS D:\developer\IdeaProjects\itcast-nodejs> npm install webpack-cli@3.3.2 -g
D:\developer\node.js\npm_modules\webpack-cli -> D:\developer\node.js\npm_modules\node_modules\webpack-cli\bin\cli.js

> webpack-cli@3.3.2 postinstall D:\developer\node.js\npm_modules\node_modules\webpack-cli
> node ./bin/opencollective.js



                            **Thanks for using Webpack!
                 Please consider donating to our Open Collective
                        to help us maintain this package.**



                 Donate: https://opencollective.com/webpack/donate


npm WARN webpack-cli@3.3.2 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.

+ webpack-cli@3.3.2
added 206 packages from 126 contributors in 18.13s
在这里插入代码片
<think> 我们遇到的问题是:friendly-errors-webpack-plugin@1.7.0 需要 webpack 的版本为 ^2.0.0 || ^3.0.0 || ^4.0.0,但是当前项目中的 webpack 版本可能是5.91.0(或者不在上述范围内),导致出现peer依赖警告。 解决方案: 1. 检查当前webpack版本。 2. 根据情况选择降级webpack或者升级friendly-errors-webpack-plugin(如果存在新版本的话)或者寻找替代插件。 根据引用[3]中的经验,有时可以通过安装指定版本的依赖来解决。 步骤: 1. 查看当前项目的webpack版本: 在package.json中查看webpack的版本号,或者在终端运行: ```bash npm list webpack ``` 2. 如果当前webpack版本是5.x,而friendly-errors-webpack-plugin要求webpack版本最高为4.x,那么有两种选择: a) 降级webpack4.x版本(但要注意项目是否依赖webpack5的特性) b) 升级friendly-errors-webpack-plugin到支持webpack5的版本(如果有的话) 3. 查阅friendly-errors-webpack-plugin的npm页面,我们发现: - 原插件在1.7.0版本后没有更新(目前最新就是1.7.0),所以不支持webpack5。 - 但是有一个社区维护的fork版本叫做`@soda/friendly-errors-webpack-plugin`,它支持webpack5。 4. 因此,我们有两个解决方案: 方案一(推荐):使用支持webpack5的fork版本 步骤: ```bash npm uninstall friendly-errors-webpack-plugin # 卸载旧版 npm install @soda/friendly-errors-webpack-plugin --save-dev ``` 然后在webpack配置文件中修改插件引用: ```javascript // 原来的 const FriendlyErrorsWebpackPlugin = require(&#39;friendly-errors-webpack-plugin&#39;); // 改为 const FriendlyErrorsWebpackPlugin = require(&#39;@soda/friendly-errors-webpack-plugin&#39;); ``` 方案二:降级webpack4.x版本 如果项目允许,可以降级webpack: ```bash npm uninstall webpack npm install webpack@^4.0.0 --save-dev ``` 同时,需要检查项目中其他依赖是否兼容webpack4。 5. 如果选择方案二,还需要注意webpack-dev-server的版本兼容性(如引用[2]和[3]中所示,webpack-dev-server@2.9.1对应webpack3)。因此,降级webpack4时,应安装对应的webpack-dev-server版本(例如webpack-dev-server@3.x或4.x,具体查看其文档)。 考虑到webpack5已经发布较长时间,且新项目通常使用较高版本,因此方案一(使用fork版本)可能是更好的选择。 6. 验证:安装完成后,重新运行项目,警告应消失。 注意:在修改依赖后,最好删除node_modules和package-lock.json,然后重新安装依赖,以避免残留问题。 ```bash rm -rf node_modules package-lock.json npm install ``` 总结:优先尝试使用fork版本(@soda/friendly-errors-webpack-plugin)来兼容webpack5,如果不行再考虑降级webpack。 根据引用[3]的经验,有时安装特定版本可以解决问题,但这里的问题根源是版本不匹配,所以我们选择上述方案。 示例package.json片段(使用方案一后): ```json "devDependencies": { "@soda/friendly-errors-webpack-plugin": "^1.0.0", # 注意检查实际安装的最新版本号 "webpack": "^5.91.0", // ... 其他依赖 } ``` 最后,运行项目验证警告是否消失。 §§相关问题§§ 1. 如何解决 npm 中的 peer 依赖冲突? 2. 如何检查 npm 包的兼容版本? 3. webpack 5 有哪些重大变更? 4. 如何使用 fork 的 npm 包替换原包? 5. 升级 webpack 版本时需要更新哪些常用插件? [^1]: [^2]: [^3]: </think> ### 解决 npm 警告:friendly-errors-webpack-plugin 对等依赖问题 #### 🔧 问题分析 当出现警告 `npm WARN friendly-errors-webpack-plugin@1.7.0 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed` 时,表示: 1. 当前项目安装的 `friendly-errors-webpack-plugin@1.7.0` 仅兼容 Webpack 2/3/4 版本 2. 项目中使用的 Webpack 版本不匹配(可能是 Webpack 5+) 3. 两者存在版本冲突导致 npm 依赖树无法解析[^1] #### 💡 解决方案 ##### ✅ 方法一:安装兼容的 Webpack 版本(推荐) ```bash # 卸载当前 Webpack 版本 npm uninstall webpack # 安装兼容的 Webpack 4.x 最新版 npm install webpack@^4.0.0 --save-dev # 验证版本 npx webpack --version # 应输出 v4.x.x ``` > **适用场景**:项目不依赖 Webpack 5 新特性时 ##### ✅ 方法二:升级插件到兼容版本 ```bash # 卸载旧版插件 npm uninstall friendly-errors-webpack-plugin # 安装支持 Webpack 5 的社区维护版 npm install @soda/friendly-errors-webpack-plugin --save-dev ``` 在 webpack 配置中更新引用: ```javascript // 修改前 const FriendlyErrorsPlugin = require(&#39;friendly-errors-webpack-plugin&#39;); // 修改后 const FriendlyErrorsPlugin = require(&#39;@soda/friendly-errors-webpack-plugin&#39;); ``` ##### ✅ 方法三:强制安装忽略警告(临时方案) ```bash # 添加 --legacy-peer-deps 参数忽略警告 npm install --legacy-peer-deps ``` > **注意**:此方法可能导致运行时错误,仅建议临时使用 #### 📊 版本兼容对照表 | 组件 | 兼容方案 | 命令 | |------|----------|------| | Webpack 5+ | 升级插件 | `npm i @soda/friendly-errors-webpack-plugin` | | Webpack 4- | 保持原配置 | 无需操作 | | 旧项目迁移 | 降级 Webpack | `npm i webpack@^4.0.0` | #### ️ 操作后检查 修改后执行以下验证: ```bash # 检查依赖树 npm list --depth=0 # 重新构建项目 npm run build ``` > 警告应消失且构建无报错 #### 🌐 替代方案推荐 如果仍存在问题,可考虑替代插件: ```bash npm install webpackbar --save-dev # 现代化进度条插件 npm install progress-bar-webpack-plugin --save-dev # 轻量级替代 ```
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值