Is there a way to let webpack dev server use another port?

Question

I'm using the webpack dev server, via the react scripts and I'd like to use the debugging functionality it offers via Visual Studio Code, however, I have a non-standard setup. We have service in front of the webpack dev server that proxies all requests, bundles requests with other services, handles security etc. So on local development, I open localhost:8080, which forwards all requests to localhost:8084 which is the webpack server. However, that service (on 8080) does not support websockets, and thus cannot forward them. I see webpack tries to fallback to an iFrame, which works for the reloading but not for debugging it seems.

Is there a way for me to explicitly tell webpack that it should connect to the webpack dev server on port 8084, instead of trying to do it via 8080? I already use I already use PORT=8084 cross-env REACT_APP_VERSION=$npm_package_version react-scripts start in package.json, which I think passes on the port. However, the problem is that the socket is always opened to the same host/port you are running on. So when my page is proxied to :8080, tries the socket on :8080 as well. What I want is to explicitly tell it not to use 8080, but 8084.

And secondary, it is correct that debugging doesn't work via the iFrame backup option?

Answer 1

You can specify the port for webpack-dev-server on webpack.config.js or on the CLI.

devServer.port

number

Specify a port number to listen for requests on:

webpack.config.js

module.exports = {
  //...
  devServer: {
    port: 8080,
  },
};

Usage via the CLI

Webpack 4

webpack-dev-server --port 8080

Webpack 5

npx webpack serve --port 8080