错误：无法使用 webpack-cli 4.2.0 找到模块“webpack-cli/bin/config-yargs”

如何解决错误：无法使用 webpack-cli 4.2.0 找到模块“webpack-cli/bin/config-yargs”

当我尝试运行 webpack-dev-server 时，它给出了错误。

Error: Cannot find module 'webpack-cli/bin/config-yargs'

我环顾四周，发现您必须将脚本更改为“webpack serve”并这样做，但随后它给了我以下内容：

**[webpack-cli] 无效的配置对象。已使用与 API 架构不匹配的配置对象初始化 Webpack。

configuration.devtool 应该匹配模式“^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$”。自 webpack 5 以来的重大变化：devtool 选项更加严格。请严格按照模式中关键字的顺序。**

我的系统是Windows 10 Pro，版本如下：

webpack：5.6.0
webpack-cli: 4.2.0
webpack-dev-server: 3.11.0

我也尝试在 webpack.config.js 中的 devServer 对象中包含“inline: false”，但无济于事。

解决方法

也许有人需要将 devtool: 'cheap-module-eval-source-map' 更改为 devtool: 'eval-source-map'

只需几步：

添加脚本 "dev": "webpack serve"
在 devtool: 'eval-source-map' 中设置 webpack.config.js
然后运行 npm run dev 或 npx webpack serve

webpack v5 && webpack-cli v4 应该使用 webpack serve 而不是 webpack-dev-server

如果你跑 npx webpack serve 出来

configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$". BREAKING CHANGE since webpack 5: The devtool option is more strict. Please strictly follow the order of the keywords in the pattern.**

您可以在devtool: 'eval-source-map'中设置webpack.config.js

通常是为了平衡速度和调试：

在 development 模式下，我们使用 devtool: 'eval-source-map'
在 production 模式下，我们使用 devtool: 'cheap-module-source-map'

你也可以返回webpack v4 && webpack-cli v3 或尝试npm i webpack-dev-server@4.0.0-beta.0 -D 见https://github.com/webpack/webpack-dev-server/releases/tag/v4.0.0-beta.0

您可以看到更多问题