webpack-dev-server错误

Question

因为重装系统，重新安装了node，原来一切正常的webpack打包项目，现在出现了如下错误：
E:aa>webpack-dev-server
Invalid configuration object. webpack-dev-server has been initialised using a configuration object that does not match the API schema.

• configuration has an unknown property 'error'. These properties are valid:
  object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, watchOptions?, headers?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, compress?, proxy?, historyApiFallback?, staticOptions?, setup?, stats?, reporter?, noInfo?, quiet?, serverSideRender?, index?, log?, warn? };

半个月没去运行这个项目，今天运行了一下，竟然恢复正常了，没有任何设置，一切正常，原来时间才是最好的解药

Answer 1

排查了3个小时，发现自己新安装的node版本过低，4.4.3，最新已经6.多了。卸载之后重新安装，原先在npm install时抛出的警告都没了，可是运行webpack-dev-server还是出现同样的错误，最后我试了试把config里devServer全部注释掉，重新运行webpack-dev-server，奇迹出现了，竟然跑了起来，端口号还是被注释掉的8181;虽然问题解决了，但是我非常奇怪，为什么devServer里的配置都注释了，webpack-dev-server能运行成功，而且端口号还是有效的，我在其他文件查找也没有找到其他有配置端口的字段。

Answer 2

这是webpack和webpack-dev-server schema校验不过的原因，因为新版本的webpack,在你自己配置了devServer时候，它会在devServer自动给你加上error 和reportTime属性，所以导致报错，目前我解决该办法就是把全局安装在本地的webpack-dev-server的lib文件加两行代码，就是删除这多加的两个属性。后面的修复只能等待wepack修复这个问题了。修复方法如图片所示

Answer 3

热更新不仅仅是要在devServer开启就行了，还要引入webpack,在插件里实例化webpack热更新的js，最后再主要的入口文件，如index.js里面设置下

webpack.config.js

let webpack = require('webpack');
module.exports = {
    plugins:[
        // 引入webpack配置的热更新js
        new webpack.HotModuleReplacementPlugin() 
    ],
    devServer:{
        contentBase: './dist',
        host: 'localhost',      // 默认是localhost
        port: 3000,             // 端口
        open: true,             // 自动打开浏览器
        hot: true,               // 开启热更新
    }
}

index.js

//需要在主要的文件写入启动热更新
if(module.hot){
  module.hot.accept();
}

Answer 4

重装一下webpack-dev-server。

关于dev-serve的配置参考
https://webpack.js.org/config...

Answer 5

遇到同样的问题，很困惑，你已经解决了么？

Answer 6

问题解决了
1.把devServer注释掉
2.如果要配置的话加 delete.options.error;
delete.options.reportTime;

Answer 7

把配置devServer中的historyApiFallBack注释掉试试,不用delete那俩属性.

Answer 8

不用注释整个 devServer，我把 overlay 配置项就可以了，虽然我也不知道是什么原理

Answer 9

评论全在误导人？，只要把不属于当前webpack版本的属性替换或者去掉就好了。比如v5不存在disableHostCheck，overlay变成client:{overlay:true}等等。