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

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.

I figured out the answer to my own problem. port 3035 is needed to be open and available to the web browser for hotloading to work, although I don't know the details.

Ok, I figured out that three things were wrong in my particular configuration. First, "web-dev-server" needs to be loaded for hotloading to work. So my Procfile.dev-hmr looks like the following:

web: bundle exec rails s -b 0.0.0.0 -p 3000  
webpack-dev-server: bin/webpack-dev-server

I load this file like the following:

foreman start -f Procfile.dev-hmr

Second, webpack-dev-server operates on port 3035, so you have to open up that port on docker. I did this with the "port" command with the following docker-compose file as an example:

version: '3'
services:
    db:
      image: postgres:9.3
      ports:
        - "5432:5432"
      volumes:
        - ./tmp/db:/var/lib/postgresql/data
    web:
      build: .
      command: foreman start -f Procfile.dev-hmr
      volumes:
        - .:/myapp
      expose:
        - 3000
        - 3035
      ports:
        - "3000:3000"
        - "3035:3035"
      depends_on:
        - db
      user: "1000:1000"
      environment:
        - WEBPACKER_DEV_SERVER_HOST=0.0.0.0

3. I had to set the server host for webpacker to "0.0.0.0" (I suppose it's because docker uses some weird ip address). I did this by setting the environment variable: WEBPACKER_DEV_SERVER_HOST=0.0.0.0

I was able to do this in the above docker-compose.yml script.

For anyone experiencing this with Webpack 5, you need to add this line to your webpack config: target:web, as mentioned here.