Webpack 5 同一网络下外接设备访问站点无法自动刷新如何解决？

问题原因 #

你配置中的public字段是问题根源：
webpack dev server会根据这个字段的值，向打包后的页面注入热更新、自动刷新对应的websocket连接地址。你当前配置的public: '127.0.0.1:8000'是本地回环地址，电脑端用本地地址访问时可以正常连接socket接口，自然能触发更新；但移动端是通过你电脑的局域网IP访问站点，页面里注入的socket地址还是指向移动端自身的127.0.0.1，移动端没有运行dev server，无法接收到更新推送，就不会自动刷新。

修复方案 #

两种方案二选一即可：

• 直接删除public配置项
  webpack 5默认会自动根据当前访问的地址推导对应的socket连接地址，不需要手动指定该字段，删除后适配本地、局域网所有设备的访问场景，是最省事的方案。
  修改后的devServer配置参考：

devServer: {
    before: function (app, server) {
        server._watch('./src/html/**/*.html');
    },
    port: 8000,
    hot: true,
    host: '0.0.0.0',
    open: true
}

• 把public值替换为你电脑的局域网IP+端口
  先查询你电脑的局域网IP：Windows系统在终端执行ipconfig，Mac/Linux系统执行ip addr，一般是192.168开头的地址，比如你查到的IP是192.168.3.26，就把配置改成public: '192.168.3.26:8000'即可。这个方案的缺点是更换WiFi后IP变动需要同步修改配置，灵活性不如第一种。

修改配置后重启dev server，移动端重新用电脑局域网IP访问站点，修改代码即可触发自动刷新。

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