Configure Webpack to work inside a container

Expose webpack's dev server outside the container

In order to make your app reachable outside the container webpack-dev-server must be configured to use 0.0.0.0 as host.

webpack.config.js

  module.exports = {
    //...
    devServer: {
      host: '0.0.0.0'
    }
  };

Enable Hot Module Replacement

If you want to use the Webpack Hot Module Replacement feature to hot reload changes while using the development server, you need to enable it and set the socket port to 443.

Webpack 5

webpack.config.js

  module.exports = {
    //...
    devServer: {
      host: '0.0.0.0',
      hot: true,
      client: {
        webSocketURL: {
          port: 443
        }
      }
    }
  };

Webpack 4

webpack.config.js

  module.exports = {
    //...
    devServer: {
      host: '0.0.0.0',
      hot: true,
      sockPort: 443
    }
  };

Host check configuration

Webpack performs a host check when accessing the server. External access to the server won't be allowed unless it's properly configured. Check webpack's dev server documentation for more information.

Webpack 5

You can bypass this check entirely by setting the allowedHosts option to all:

webpack.config.js

  module.exports = {
    //...
    devServer: {
      host: '0.0.0.0',
      allowedHosts: 'all'
    }
  };

Webpack 4

You can bypass this check entirely by setting the disableHostCheck option to true:

webpack.config.js

  module.exports = {
    //...
    devServer: {
      host: '0.0.0.0',
      disableHostCheck: true
    }
  };

Watching files

Webpack uses the file system to get notified of file changes and enable features like hot-reloading. You might experience file watching issues if your docker image is not compatible with webpack's file system subsystem. If that's your case, enable the polling option:

Webpack 5

webpack.config.js

  module.exports = {
    //...
    devServer: {
      host: '0.0.0.0',
      watchOptions: {
        poll: true // Or you can set a value in milliseconds.
      }
    }
  };

Webpack 4

webpack.config.js

  module.exports = {
    //...
    devServer: {
      host: '0.0.0.0',
      watchOptions: {
        poll: true // Or you can set a value in milliseconds.
      }
    }
  };

Check webpack's documentation for more information about watchOptions.