有没有办法让 webpack 开发服务器使用另一个端口？答案

【问题标题】：Is there a way to let webpack dev server use another port?有没有办法让 webpack 开发服务器使用另一个端口？
【发布时间】：2018-08-30 08:34:10
【问题描述】：

我正在使用 webpack 开发服务器，通过反应脚本，我想使用它通过 Visual Studio Code 提供的调试功能，但是，我有一个非标准设置。我们在 webpack 开发服务器前面有服务，它代理所有请求，将请求与其他服务捆绑，处理安全等。所以在本地开发中，我打开 localhost:8080，它将所有请求转发到 localhost:8084，它是 webpack 服务器。但是，该服务（在 8080 上）不支持 websocket，因此无法转发它们。我看到 webpack 尝试回退到 iFrame，它适用于重新加载，但似乎不适用于调试。

有没有办法让我明确告诉 webpack 它应该连接到端口 8084 上的 webpack 开发服务器，而不是尝试通过 8080 来连接？我已经使用了我已经在 package.json 中使用了PORT=8084 cross-env REACT_APP_VERSION=$npm_package_version react-scripts start，我认为它通过了端口。但是，问题在于套接字始终打开到您正在运行的同一主机/端口。所以当我的页面被代理到:8080 时，也会尝试:8080 上的套接字。我想要的是明确告诉它不要使用8080，而是8084。

其次，通过 iFrame 备份选项无法进行调试是否正确？

【问题讨论】：

您的调试问题到底是什么？ React-dev-tools 在 iframe 模式下不可用？（在这种情况下，请检查：github.com/facebook/react-devtools/issues/57）
我认为这个solution 会帮助你

标签： webpack webpack-dev-server react-scripts

【解决方案1】：

您在webpack.config.js 或 CLI 上为 webpack-dev-server can specify the port。

devServer.port

number

指定一个端口号来监听请求：

webpack.config.js
module.exports = {
  //...
  devServer: {
    port: 8080,
  },
};
通过 CLI 使用

Webpack 4

webpack-dev-server --port 8080

Webpack 5

npx webpack serve --port 8080

【讨论】：