运行npm run dev出现webpack Dev Server配置错误该如何处理？

问题原因 #

你当前使用的是webpack-dev-server v4及以上版本，该版本对配置项做了不兼容更新，删除了v3版本支持的stats、contentBase、inline、watchContentBase、disableHostCheck等配置属性，因此启动时会报配置不匹配的错误。

修复方案 #

修改devServer.js配置内容，调整为v4版本支持的配置格式：

1. 移除顶层stats属性，将日志统计配置移入devMiddleware.stats中
2. contentBase改为static
3. 删除已废弃的inline配置，v4默认开启该能力无需单独配置
4. watchContentBase改为watchFiles
5. disableHostCheck: true改为allowedHosts: "all"
6. overlay配置移入client字段下

修改后的完整devServer.js代码如下：

// ---------------------
// @Loading Dependencies
// ---------------------

const manifest = require('./manifest');


// ------------------
// @DevServer Configs
// ------------------

/**
 * [1] : To enable local network testing
 */

const devServer = {
  static               : manifest.IS_PRODUCTION ? manifest.paths.build : manifest.paths.src,
  historyApiFallback   : true,
  port                 : manifest.IS_PRODUCTION ? 3001 : 3000,
  compress             : manifest.IS_PRODUCTION,
  watchFiles           : true,
  hot                  : !manifest.IS_PRODUCTION,
  host                 : '0.0.0.0',
  allowedHosts         : "all", // [1] 替代旧版disableHostCheck
  client: {
    overlay            : true,
  },
  devMiddleware: {
    stats: {
      assets     : true,
      children   : false,
      chunks     : false,
      hash       : false,
      modules    : false,
      publicPath : false,
      timings    : true,
      version    : false,
      warnings   : true,
      colors     : true,
    },
  }
};


// -----------------
// @Exporting Module
// -----------------

module.exports = devServer;

最后确认你的webpack.config.js中已经正确引入了上述devServer配置，添加到导出的配置对象中即可：

const devServer = require('./devServer.js'); // 引入路径根据实际存放位置调整

module.exports = {
  // 原有配置保持不变
  devServer: devServer,
  // 原有其他配置项
}

修改完成后重新执行npm run dev即可正常启动。

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