输入指令npx webpack-dev-server报错:Error: Cannot find module ‘webpack-cli/bin/config-yargs‘的解决方法

输入指令npx webpack-dev-server报错:Error: Cannot find module ‘webpack-cli/bin/config-yargs‘的解决方法

输入指令:npx webpack-dev-server显示如下报错信息:

C:\Users\ASUS\Desktop\JavaScript 代码\webpack实验>npx webpack-dev-server
internal/modules/cjs/loader.js:983
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- C:\Users\ASUS\Desktop\JavaScript 代码\webpack实验\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
    at Function.Module._load (internal/modules/cjs/loader.js:862:27)
    at Module.require (internal/modules/cjs/loader.js:1042:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (C:\Users\ASUS\Desktop\JavaScript 代码\webpack实验\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\ASUS\\Desktop\\JavaScript 代码\\webpack实验\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
  ]
}

原因:webpack现在存在一个bug,最新版的webpack-dev-server 和最新版的webpack-cli 并不兼容。
解决办法:
打开package.json,查看依赖包的版本:

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.16.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2"
  }
}

重新下载webpack-cli正确的版本。(“webpack-cli”: “^3.3.12”,和
“webpack-dev-server”: "^3.11.2"是互相兼容的,报错之前的版本是webpack-cli 4.4.0)

如果你找不到与webpack-dev-server兼容的webpack-cli版本号,可以去node_modules中的webpack-dev-server/bin/webpack-dev-server.js代码中寻找webpack-dev-server依赖webpack-cli的版本号。

posted @ 2021-01-21 10:51  clienter  阅读(365)  评论(0)    收藏  举报