Skip to main content

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.config.js​

  module.exports = {
    //...
    devServer: {
      host: '0.0.0.0',
      hot: true,
      client: {
        webSocketURL: {
          port: 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.

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'
    }
  };

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.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.