TL;DR A sample project to webpack-dev-server in a Docker container is in this repository.
Background
Sometimes we want to run webpack-dev-server in a Docker container.
The reason might be like following
- Want to use a specific Node.js version docker image
- Want to start project in a series of docker-compose services
Key points
There's some key points to run webpack-dev-server in a Docker container.
Needs to run the dev server for 0.0.0.0
By default, the dev server runs for 127.0.0.1 to enable accessing by localshot:XXXX on browsers. But this does not expose the content outside of a Docker container. You need to listen 0.0.0.0. Ref: What is the difference between 0.0.0.0, 127.0.0.1 and localhost?
...
devServer: {
compress: false,
host: "0.0.0.0",
port: 3000,
},
...
https://github.com/ku6ryo/WebpackDevServer-w-Docker/blob/master/webpack.config.js#L25
Naive watch option does not work
By default, the dev server's watch option is enabled and it automatically re-compiles and reloads every time a file changed. However, it does NOT work in the case of running in a Docker container. We need to use the poll option of webpack's watch option.
...
watchOptions: {
poll: 1000,
}
...
https://github.com/ku6ryo/WebpackDevServer-w-Docker/blob/master/webpack.config.js#L28
That's it! Hope this helps :)
Top comments (3)
watchOptionssaved my nerves. Thank you!Grad to hear that ;)
Thank you!! I was struggling with nuxtjs2. Adding those lines solved the problem:
watchers: {webpack: {
poll: true,
},
},