1

I am building a webpack-5 boilerplate. My computer and mobile are connected to the same wi-fi network. Auto-reload and hot reload works fine on my computer. I can access websites generated by Webpack on mobile, but it does not auto-reload on a mobile phone when I make changes.

devServer: {
    before: function (app, server) {
        server._watch('./src/html/**/*.html');
    },
    port: 8000,
        hot: true,
        host: '0.0.0.0',
        open: true,
        public: '127.0.0.1:8000',
}
Karl Hill
  • 12,937
  • 5
  • 58
  • 95
manjeshrv75
  • 11
  • 1

1 Answers1

1

Try using the IP address of your Wi-Fi network interface as the host. This should be the same IP address that you specify in the address of your mobile device's browser to access your webpage.

My experience is that the specified host is used for two main things. Firstly, that IP address is bound to. But, what's more important in this context, the host is also used as the address that the clients use to connect to the hot reload Webpack server. If the server is being accessed locally, then 0.0.0.0 works fine as the host as the client and server are running on the same device. But if it is accessed remotely, then the clients would try to connect to 0.0.0.0 which would mean the client's device locally, not the server.

Also, I've stumbled across this documentation file of the now archived webpack-hot-client, which mentions something called "the wildcard host", which could help making remote hot reload work more straightforwardly, but I'm not sure if the current Webpack components support it.

Magnus Teekivi
  • 473
  • 1
  • 7
  • 21