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

Posted 2023-02-22

【中文标题】错误：使用 webpack-cli 4.2.0 找不到模块“webpack-cli/bin/config-yargs”

【英文标题】：Error: Cannot find module 'webpack-cli/bin/config-yargs' with webpack-cli 4.2.0

【发布时间】：2021-03-30 07:48:19

【问题描述】：

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

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

我环顾四周，发现您必须将脚本更改为“webpack serve”并做到了，但它给了我以下信息：

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

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”，但无济于事。

【参考方案1】：

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

【参考方案2】：

只需几步：

添加脚本"dev": "webpack serve" 在webpack.config.js 中设置devtool: 'eval-source-map' 然后运行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.**

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

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

在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

您可以查看更多问题

https://github.com/webpack/webpack-cli/issues/1948 https://github.com/webpack/webpack-dev-server/issues/2759