I am not a fan of having
webpack-dev-server configured to open automatically in the browser, in my opinion it comes more handy to configure the browser to open that tab when it is started or to bookmark the dev url. But I think working in a team conventions are very important and if the team feels that it is nice to have it then it is important to configure it so it doesn't get in the way of any developer workflow.
The first part is to configure
webpack-dev-server to be reachable from outside of the container, often the container can mask the original port the server was running, and to be honest, that is one of the advantages of using containers. That being said, the default configuration is secure by only allowing access on localhost (
127.0.0.1) but limiting, so you need to manually set devServer.host to
0.0.0.0 to be externally accessible, you might need to do the same for ws, and that is documented here.
This by itself solves the problem of being able to talk to the server but introduces a little nuisance, open stop working since by default it tries to open
host:port and host is now
0.0.0.0, you can always type the address manually in the browser but that defeats the purpose of opening it automatically. So you need to set
devServer.open to an array containing the string
localhost:port or whatever ip address you are using. Open configuration is very flexible and can open more than one page at a time and configure the browser to be used, but you must keep in mind that last thing is OS dependent.
Note: if you are using old webpack versions you set this in two variables,
devServer.open that is a boolean and must be
devServer.openPage that will contain the url to be opened.