安装webpack与webpack-dev-server后启动报contentBase未知属性错误如何解决

你使用的是v4及以上版本的webpack-dev-server，该版本移除了v3中用于指定静态资源服务目录的contentBase配置项，改用static配置项替代，因此原有配置触发schema校验报错。

1. 打开你的webpack配置文件（通常为项目根目录下的webpack.config.js，或者自定义的配置文件如build/webpack.dev.js）
2. 定位到devServer配置段，找到contentBase配置项
3. 直接将配置键名从contentBase改为static即可，原属性值不需要改动

单路径配置示例 #

修改前错误配置 #

module.exports = {
  // 其他webpack配置省略
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    port: 8080,
    hot: true
  }
}

修改后正确配置 #

module.exports = {
  // 其他webpack配置省略
  devServer: {
    static: path.join(__dirname, 'public'),
    port: 8080,
    hot: true
  }
}

多路径/进阶配置示例 #

如果你原有配置同时使用了contentBasePublicPath等配套属性，需要调整为static的对象写法：

修改前错误配置 #

devServer: {
  contentBase: [path.join(__dirname, 'public'), path.join(__dirname, 'static')],
  contentBasePublicPath: '/assets'
}

修改后正确配置 #

devServer: {
  static: {
    directory: [path.join(__dirname, 'public'), path.join(__dirname, 'static')],
    publicPath: '/assets'
  }
}

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

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