配置自动webpack自动打包后运行run npm dev报错：Error: Cannot find module 'webpack-cli/bin/config-yargs'

下载安装自动打包工具webpack-dev-server：

PS D:\WEB前端\案例\前端工程化：ES6模块化和webpack打包\webpack_study> npm install webpack-dev-server -D           
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: The
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 301 packages from 203 contributors in 14.344s

重新运行run npm dev报错信息如下：

> [email protected] dev D:\WEB前端\案例\前端工程化：ES6模块化和webpack打包\webpack_study
> webpack-dev-server

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

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
    at Function.Module._load (internal/modules/cjs/loader.js:506:25)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (D:\WEB前端\案例\前端工程化：ES6模块化和webpack打包\webpack_study\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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-07-10T09_12_19_214Z-debug.log

出错原因

查阅了其他人的解决，发现是因为webpack-cli的新版本对webpack-dev-server版本的不兼容，表示很无奈：

所以只需要将当前webpack-cli的版本降低成3.3.12版本即可

PS D:\WEB前端\案例\前端工程化：ES6模块化和webpack打包\webpack_study> npm i [email protected] -D      
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 24 packages from 23 contributors, removed 23 packages and updated 15 packages in 5.391s

重新运行 run npm dev成功解决问题：

 

部分转载于 https://www.cnblogs.com/fsg6/p/14117791.html