options has an unknown property ‘contentBase‘——webpack错误解决

最近在学webpack时踩了很多坑

webpack-dev-server 开发服务器，为了方便我们开发，实时监测我们代码的改变，实时刷新页面。这样就不要一修改代码就重新运行了，大概是这个意思

配置开发服务器webpack-dev-server,

运行 

npm install -D webpack-dev-server 

在webpack.config.js中配置如下：

module.exports = {
devServer:{
        //指定服务器目录
       contentBase:'./dist',
        //是否自动打开浏览器
        open:true
}

}

接下来：通过dev-server来启动服务，需要在package.json中写npm的脚本

"scripts":{
"start":"webpack-dev-server"
}

我理解的是，这里的start是自己取的名字，之后我们如果要启动这个服务器，就可以输入

-npm run start

然后我在终端输入  npm run start,报错了：

 大概意思是 contentBase这个属性无效的。

然后我查阅了官方文档，发现现在以及弃用了这个写法（中文文档不是最新版本，就很坑~~~）

改成了这样：

devServer: {
        static: {
          directory: path.join(__dirname, 'dist'),
        },
        compress: true,
        port: 9000,
      },

对 dist/项目根目录中的所有内容进行 gzip 压缩和提供服务

成功解决了。。。。。