internal/modules/cjs/loader.js:968 throw err； ^ Error: Cannot find module ‘webpack-cli/bin/conf

webpack的devServer运行错误

PS D:\VScode_Project\vue\webpackstudy> npm install webpack-dev-server D
npm WARN deprecated D@1.0.0: Package no longer supported. Contact support@npmjs.com for more info.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN webpackstudy@1.0.0 No description

+ webpack-dev-server@3.11.2
+ D@1.0.0
added 373 packages from 231 contributors and audited 503 packages in 81.174s

29 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

PS D:\VScode_Project\vue\webpackstudy> npm run dev

> webpackstudy@1.0.0 dev D:\VScode_Project\vue\webpackstudy
> webpack

asset bundle.js 322 KiB [compared for emit] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 281 KiB
  ./src/index.js 149 bytes [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 281 KiB [built] [code generated]
webpack 5.19.0 compiled successfully in 277 ms
PS D:\VScode_Project\vue\webpackstudy> npm run dev

> webpackstudy@1.0.0 dev D:\VScode_Project\vue\webpackstudy
> webpack-dev-server

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

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- D:\VScode_Project\vue\webpackstudy\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 Object.<anonymous> (D:\VScode_Project\vue\webpackstudy\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:\\VScode_Project\\vue\\webpackstudy\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpackstudy@1.0.0 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpackstudy@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\hhy\AppData\Roaming\npm-cache\_logs\2021-01-31T03_02_12_501Z-debug.log

问题原因

webpack-dev-server和webpack-cli有版本对应问题，我使用的版本如下：

解决方案

1、运行命令卸载webpack-cli

PS D:\VScode_Project\vue\webpackstudy> npm uninstall webpack-cli
npm WARN webpackstudy@1.0.0 No description
npm WARN webpackstudy@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})  

removed 41 packages and audited 462 packages in 2.788s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

如果报错，就从package.json中手动删除webpack-cli项（如下图），然后删除掉node_modules文件夹，运行cnpm install 重新安装依赖

2、安装低版本webpack-cli

PS D:\VScode_Project\vue\webpackstudy> npm install webpack-cli@3 -D
npm WARN webpack-cli@3.3.12 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpackstudy@1.0.0 No description
npm WARN webpackstudy@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})  

+ webpack-cli@3.3.12
added 42 packages from 27 contributors and audited 504 packages in 13.789s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

3、安装成功后问题就解决了

PS D:\VScode_Project\vue\webpackstudy> npm run dev

> webpackstudy@1.0.0 dev D:\VScode_Project\vue\webpackstudy
> webpack-dev-server

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\VScode_Project\vue\webpackstudy
i ｢wdm｣: asset bundle.js 685 KiB [emitted] (name: main)
runtime modules 1.25 KiB 6 modules
cacheable modules 616 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
  modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.51 KiB
    ./node_modules/querystring/index.js 127 bytes [built] [code generated]
    ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
    ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
  modules by path ./node_modules/webpack/hot/*.js 1.42 KiB
    ./node_modules/webpack/hot/emitter.js 75 bytes [built] [code generated]
    ./node_modules/webpack/hot/log.js 1.34 KiB [built] [code generated]
./node_modules/webpack/hot/ sync nonrecursive ^\.\/log$ 170 bytes [built] [code generated]
webpack 5.19.0 compiled successfully in 476 ms
i ｢wdm｣: Compiled successfully.

如果对你有帮助，可以点赞收藏+关注哦