小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
出问题的环境配置：webpack: "^5.58.2",webpack-cli: "^4.3.1"。
今天自己在研究webpack的时候出了以下两个错误，根据百度的方案都没有解决，特贴出来分享给正在学习的同学。有问题大家多探讨。
报错一
报错信息如下：
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
options has an unknown property 'contentBase'. 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?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
见到报错不要慌，先来分析一下出错的原因在哪里？
其实报错说明的已经很详细了，你使用的 contentBase 属性不存在。回想一下，整篇代码都是跟着大神一起操作的，排除代码敲错的可能，那就要想了，是不是版本的原因导致属性更新消失了，已经有其他属性可以替代了？通过查看 webpack 官方文档得知答案是肯定的。
webpack-dev-server(简写:dev-server) version >= 4.0.0 配置的选项中取消了 contentBase 配置，取而代之的是 static下的directory属性。
具体代码如下：
// 为方便查看只写了 devServer 部分的代码。 浏览器会自动刷新时访问的页面路径
// dev-server 4.0 以前的写法
devServer: {
contentBase: path.join(__dirname, "./dist")
}
// dev-server 4.0 以后的写法
devServer: {
static: {
directory: path.join(__dirname, './dist'),
}
}
报错二
报错信息如下：
Uncaught ReferenceError: process is not defined
报错原因：当webpack的配置文件中mode设置为none时，运行页面会报这个错误。查看官网后，文档中模式mode支持的字符串只有development和 production，这里将mode改为 development。至此问题消失。
