Enabling webpack hot-reload in a docker application

I couldn't make webpack or webpack-dev-server watch (--watch) mode work even after mounting my project folder into container.
To fix this you need to understand how webpack detects file changes within a directory.
It uses one of 2 softwares that add OS level support for watching for file changes called inotify and fsevent. Standard Docker images usually don't have these (specially inotify for linux) preinstalled so you have to install it in your Dockerfile.
Look for inotify-tools package in your distro's package manager and install it. fortunately all alpine, debian, centos have this.

Docker & webpack-dev-server can be fully operational without any middleware or plugins, proper configuration is the deal:

devServer: {  port: 80, // use any port suitable for your configuration  host: '0.0.0.0', // to accept connections from outside container  watchOptions: {      aggregateTimeout: 500, // delay before reloading      poll: 1000 // enable polling since fsevents are not supported in docker  }}

Use this config only if your docker container does not support fsevents.

For performance efficient way check out HosseinAgha answer #42445288: Enabling webpack hot-reload in a docker application

try doing this:

1. Add watchOptions.poll = true in webpack config.

   watchOptions: { poll: true},

2. Configure host in devServer config

   host:"0.0.0.0",