webpack运行devServer提示存在未知属性hotOnly报错如何解决

问题原因 #

该错误是由于你使用了webpack-dev-server v4及以上版本导致的：v4版本对devServer的配置项做了不兼容的破坏性更新，原v3版本中支持的hotOnly、contentBase配置项已被正式移除，不符合v4的API Schema规则，因此启动时会抛出参数校验失败的错误。

修复方案 #

你只需要修改webpack.config.js中devServer节点的配置即可，具体修改点如下：

• 将原配置中的hotOnly: true替换为hot: "only"，二者功能完全一致，作用是热模块替换失败时不自动回退到页面全量刷新
• 将原配置中的contentBase配置项替换为static，v4版本使用static配置静态资源服务目录，替代原有的contentBase
• （可选优化）devServer节点下的publicPath默认会继承output节点的publicPath配置，你可以直接删除该重复配置，或者修改为和output一致的/dist/即可

修改后的完整devServer配置如下：

devServer: {
  static: path.join(__dirname, "public/"),
  port: 3000,
  publicPath: "/dist/",
  hot: "only",
},

修改完成后重新执行启动命令即可正常运行。

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