运行npm run dev 报错npm ERR! Failed at the 01.webpack-base@1.0.0 dev script.报错的原因

搭建webpack 的时候,运行 npm run dev,报错如下:

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- D:\代码\vue\webpack-study\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (D:\代码\vue\webpack-study\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\代码\\vue\\webpack-study\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-study@1.0.0 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-study@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\小蠢蛋\AppData\Roaming\npm-cache\_logs\2021-06-04T12_52_50_585Z-debug.log
    

出现上述原因,应该是webpack 版本和 webpack-cli 以及 webpack-dev-server版本不兼容的原因,因此,需要将这三者的版本相匹配,可以运行如下命令来修改这三者的版本问题,

// 首先卸载不适配的 webpack webpack-cli webpack-dev-serve 这三个工具
cnpm uninstall --save-dev webpack-cli 
// 此处的 webpack-cli 可以修改为webpack 或者 webpack-dev-serve 

// 然后,重新下载匹配版本号的webpack webpack-cli webpack-dev-serve
 cnpm install --save-dev webpack-dev-server@3.3.5
// 此处的 webpack-dev-serve@3.3.5 可以修改成 webpack 或 webpack-cli 对应的版本号

注:推荐上述三者的版本号如下:
在这里插入图片描述
经验证,上边三个工具的版本号,相互兼容,可以放心使用

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值