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

最新推荐文章于 2021-06-16 11:39:47 发布

转载最新推荐文章于 2021-06-16 11:39:47 发布 · 620 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/rapale/p/13863511.html

标签

#webpack

在尝试使用npm run dev时遇到`Cannot find module 'webpack-cli/bin/config-yargs'`错误。发现本地webpack5与webpack-cli和webpack-dev-server不兼容。降低webpack到v4.43.0，同时配合webpack-cli v3.3.12和webpack-dev-server v3.11.0解决了问题。尽管新版本可能存在兼容性挑战，但通过调整版本或等待适配更新，仍能应对这些问题。对于新技术的使用，需要不断实践和适应其变化。

1. 执行 npm run dev

提示：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"

执行 npm run dev

4.总结：

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