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

Host check configuration

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

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 subsytem. If that's your case, enable the polling option:

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

Check webpack's documentation for more information about watchOptions.