webpack-dev-server compiles but does not refresh my web browser

问题

I am trying to "hot-load" my jsx components by using webpack-dev-server. This is the command I am using:

bin/webpack-dev-server --host 0.0.0.0

When I save my jsx code, it interestingly compiles, but does not inform my development web server that the update took place. I have to manually refresh the browser for the change to be reflected.

I am using docker, so I suspect that it has something to do with a network issue. I notice that webpack-dev-server uses port 3035 and my web development server uses port 3000.

Question, when webpack-dev-server finishes compiling, does it open a socket connection to the webserver to make it refresh?

回答1:

The reason why Hot module replacement [HMR] is not working in docker is because of the way Webpack looks for file changes in a directory, it uses fsevent and inotify. These are modules webpack uses to watch the files in a specified directory. For using webpack-dev-server in a docker image, its best explained by Mihail Ignatiev and HosseinAgha.

Also, you can change the port number the webpack-dev-server command uses by specifying it in the webpack.config.js.

var path = require('path');

module.exports = {
  // It can be changed using port key
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

To answer your question, webpack-dev-server will include a script in your bundle that connects to a websocket to reload when a change occurs in any of your files. The --public flag makes sure the script knows where to look for the websocket. The server will use port 8080 by default, so we can also specify a custom port using --port cli option.

Also, inline mode is recommended for hot reload as it includes an HMR trigger from the websocket. Polling mode can be used as an alternative, but requires an additional entry point, webpack/hot/poll?1000. You can use it as follows,

webpack-dev-server --inline

For an in depth insight into how webpack-dev-server uses websockets, you can refer to the official documentation.

来源：https://stackoverflow.com/questions/62207054/webpack-dev-server-compiles-but-does-not-refresh-my-web-browser

标签

webpack-dev-server