Laravel + Vue 项目执行npm run hot报错：配置存在未知属性webpackbar

问题根源 #

该报错由laravel-mix 6.x与webpack-dev-server v4+版本不兼容导致：webpack-dev-server v4移除了对自定义顶层配置属性的支持，而低版本laravel-mix启动hot模式时会自动在devServer配置中注入webpackbar属性，触发配置校验失败。watch模式不会加载完整的devServer校验逻辑，因此可以正常运行。

解决方案（二选一即可） #

方案1：降级webpack-dev-server到兼容版本

• 执行命令安装v3版本webpack-dev-server：npm install webpack-dev-server@3.11.3 --save-dev
• 删除项目根目录的node_modules文件夹与package-lock.json（yarn用户删除yarn.lock），清除缓存冲突
• 重新执行npm install安装依赖
• 重新运行npm run hot即可正常启动

方案2：手动移除非法配置属性

不需要降级依赖，直接修改webpack.mix.js，通过override钩子删除devServer中的webpackbar属性即可：

const mix = require('laravel-mix');

// 新增这段配置覆盖逻辑
mix.override(config => {
  if (config.devServer) {
    delete config.devServer.webpackbar;
  }
})

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]).vue().disableNotifications();

修改后重新运行npm run hot即可生效。

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