问题一：[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

  • 问题一详情：configuration.devtool should match pattern “^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$”.BREAKING CHANGE since webpack 5: The devtool option is more strict.
  • 问题二详情options has an unknown property ‘stats’. These properties are valid:object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
  • 以下是我的具体配置：

问题一详情：configuration.devtool should match pattern “^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$”.BREAKING CHANGE since webpack 5: The devtool option is more strict.

翻译过来的意思：
configuration.devtool配置应该符合 “^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$”
自 webpack 5 以来的重大更改：devtool 选项更加严格。

就是要把webpack devtool配置换成规定的
可以参考官方文档：https://webpack.js.org/configuration/devtool/

我是在学习阶段，是用于开发，在下面有相关推荐

翻译一下：

虽然他写了这些都可以，但是我最开始写的cheap-module-eval-source-map报错，而且根据错误信息，要符合正则表达式”^(inline-|hidden-|eval-)” /> cheap-module-eval-source-map中的eval位置不符合规范，根据正则表达式eval-cheap-module-source-map才符合规范

还有一些其他的也符合，例如eval-cheap-source-map，不同的选项效果不同，运行npm run build产生的文件也不同

我是这样写的，

devtool: isProd ? 'cheap-module-source-map' : 'eval-cheap-source-map',//在生产环境下使用cheap-module-source-map，很多人写了false，官方说可以为none，不知道false是不是none；在开发环境下使用eval-cheap-source-map

isProd在最上方用于判断是否是生产环境

const isProd = process.env.NODE_ENV === 'production' // 是否生产环境

最下面有完整的配置

问题二：[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

  • 问题一详情：configuration.devtool should match pattern “^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$”.BREAKING CHANGE since webpack 5: The devtool option is more strict.
  • 问题二详情options has an unknown property ‘stats’. These properties are valid:object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
  • 以下是我的具体配置：

问题二详情options has an unknown property ‘stats’. These properties are valid:object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }


原因：版本5以后devServer下面好像没有stats属性了，好像被提到了外层（只是我的猜测，我也没见过以前的版本文档）可以参考官方文档
https://webpack.js.org/configuration/stats/

所以把stats提到外边就能运行，如下：

stats: 'errors-only', // 打包日志输出输出错误信息/devServer: {//启动后host: 'localhost', // 主机名port: 8081,open: true//浏览器自动打开},

以下是我的具体配置：

目录结构：

webpack.config.js

const {CleanWebpackPlugin} = require('clean-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')const path = require('path')const isProd = process.env.NODE_ENV === 'production' // 是否生产环境function resolve (dir) {return path.resolve(__dirname, '..', dir)}module.exports = {// devtool:isProd " />