Webpack升级后devServer的disableHostCheck/public配置替换方案

新版webpack-dev-server（v4+版本）已移除disableHostCheck、public两个旧配置项，对应等效替换逻辑如下：

• 原disableHostCheck: true配置，直接替换为allowedHosts: 'all'，作用是放行所有host来源的访问请求，和旧配置效果完全一致。
• 原public: 'http://localhost:8080'配置，用于声明devServer对外的访问地址，需要拆分为独立的主机、端口配置：
  • host: 'localhost' 指定服务监听的主机地址
  • port: 8080 指定服务监听的端口
    若本地开发存在反向代理、端口映射等特殊网络场景，可额外补充client.webSocketURL配置，指定热更新websocket的连接地址，保证热更新功能正常。

替换后可直接运行的配置代码 #

// configure the dev server and public path based on environment
options.devServer = {
    allowedHosts: 'all',
    host: 'localhost',
    port: 8080,
    // 无特殊代理/端口映射场景可删除以下client配置段
    client: {
        webSocketURL: 'http://localhost:8080/ws'
    }
};

报错原因说明 #

抛出的ValidationError是配置校验不通过导致的：旧版public属性不在v4+版本devServer的合法配置列表里，替换为上述拆分后的配置即可通过schema校验，正常启动开发服务。

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