webpack 5配置devtool时报错不符合API schema该如何解决？

报错是命令行参数优先级高于配置文件导致的：你使用的-d是Webpack 4及更早版本的开发模式快捷参数，在Webpack 5中该参数已被废弃，它会默认生成不符合Webpack 5 devtool命名规范的配置值，直接覆盖你在webpack.config.js中定义的合法eval-cheap-source-map配置，因此触发格式校验错误。

• 修改构建命令，移除废弃的-d参数，同时不需要重复声明入口文件src/app.js（配置文件中已指定entry，重复声明会覆盖配置），修改后命令为：

webpack --mode development --watch

• 如果你需要在命令行单独指定devtool，需严格符合Webpack 5的命名规范，示例如下：

webpack --mode development --devtool eval-cheap-source-map --watch

你配置中devServer下的watchContentBase、contentBase是Webpack 4的废弃参数，在Webpack 5中需替换为以下配置避免启动警告：

devServer: {
  static: path.resolve(__dirname, 'dist'),
  watchFiles: path.resolve(__dirname, 'dist'),
  port: 9000
}

内容的提问来源于stack exchange，提问作者mke21