问题描述
当我尝试运行 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
您可以看到更多问题