1.为了体验新版webpack5看看有哪些功能的升级或能为我们所用,于是就完全用webpack搭建了一个脚手架前端开发工程项目,然后,在大多数都顺利的前提下,竟然报错了:
执行 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的解决方案。
执行webpack报错“Cannot find module 'webpack-cli/bin/config-yargs'”-之解决办法