执行webpack报错“Cannot find module 'webpack-cli/bin/config-yargs'”-之解决办法

Posted 2020-12-20 前端备忘录

 

 

1.为了体验新版webpack5看看有哪些功能的升级或能为我们所用，于是就完全用webpack从0搭建了一个脚手架前端开发工程项目，然而，在大多数都顺利的前提下，竟然报错了：

 执行 npx webpack-dev-server

提示：Cannot find module \'webpack-cli/bin/config-yargs\'

 

2.经过查阅相关API及文档，发现本地默认安装的新版webpack5与相关协作的功能包并不兼容，报错前安装的相关版本为：

"webpack": "^5.1.3",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^3.11.0"

3.得出了结论，新版本并不与现存相关包兼容，因此我就试着以webpack5为中心，去寻找适合webpack5的webpack-cli和webpack-dev-server，然而情况不是想象的那样，webpack5根本不与现有版本兼容，所以又把注意力转移到webpack4，我们不得不降低webpack版本从5到4，于是有了下面的版本配置，在删除node_modules包，及指定了以下package.json配置后，最初报错指令被成功执行

"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"

执行 npx webpack-dev-server

 

  

4.总结：

至此问题得以解决，webpack问题其实挺多的，但，目前来看webpack在工程化方面又是最好的实践，问题多在兼容性及相关配置方面，这就需要大家多实践，别想着一定会怎样就能很好的把问题解决。之所以有版本兼容问题，也有个很重要的原因也需要知道，不论是node 还是webpack及相关npm功能包，其实从目前来看新版本尤其是大的版本更新都改变了很多，很多从架构上都进行了更改，所以，老版本的功能包比如webpack-dev-server，并不一定能兼容新版本的webpack这就变得很正常不过了，那么我们是不是就不能使用最新版的webpack5了？其实不是。想用就要么等兼容版本，要么有精力可以自己搞一个兼容版本，在或者可以探索相关功能适合webpack5的解决方案。