配置自動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 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 querystring@0.2.0: The
npm WARN webpack_study@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-dev-server@3.11.2
added 301 packages from 203 contributors in 14.344s

重新運行run npm dev報錯信息如下：

> webpack_study@1.0.0 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 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-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 webpack-cli@3.3.12 -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 webpack_study@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 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