Webpack5环境下使用npm start启动React项目如何指定运行端口？

失效原因说明 #

Webpack4 对应 webpack-cli v3 版本，devServer 相关参数可直接通过命令行传递；升级到 Webpack5 后 webpack-cli 拆分为多个子包，devServer 相关能力被拆分到 @webpack-cli/serve 包中，未安装该依赖时就会识别不到 --port 参数，导致报错。

解决方法 #

• 方法1：补全依赖后使用原有命令传参
  先安装缺失的依赖包：

  npm install @webpack-cli/serve --save-dev
  

  安装完成后，原指定端口的命令即可正常使用：

  npm start -- --port 3361
  

• 方法2：webpack 配置文件中固定端口
  直接修改项目根目录下的 webpack.config.js，在 devServer 配置项中指定端口：

  module.exports = {
    // 其他原有配置
    devServer: {
      port: 3361,
      // 其他devServer原有配置
    }
  }
  

  配置完成后直接执行 npm start，项目会默认启动在3361端口。

• 方法3：通过环境变量动态指定端口
  如果不想硬编码端口到配置文件，可先修改 webpack.config.js 读取环境变量：

  module.exports = {
    // 其他原有配置
    devServer: {
      port: process.env.PORT || 3000, // 未指定端口时默认用3000
      // 其他devServer原有配置
    }
  }
  

  Mac 系统下启动时执行以下命令即可自定义端口：

  PORT=3361 npm start
  

内容的提问来源于stack exchange，提问作者Programmer shah