Webpack Dev Server 4.0.0配置open参数后浏览器无法自动打开如何解决

你遇到的端口配置不生效、open配置不生效的核心原因是webpack相关依赖版本不匹配，控制台抛出的两个弃用警告已经明确了问题方向：webpack-dev-server被调用的方式是v3版本的旧API，和你使用的v4版本不兼容，导致devServer配置项没有被正确加载，默认用了端口3000、关闭自动打开浏览器的默认配置。

• 第一步：确认依赖版本
  运行以下命令检查本地安装的相关依赖版本：

npm list webpack webpack-cli webpack-dev-server

要求满足版本匹配规则：
webpack ≥ 5.0.0
webpack-cli ≥ 4.7.0
webpack-dev-server ≥ 4.0.0
如果webpack-cli版本低于4.7.0，就会出现调用API不兼容的问题，导致devServer配置不生效。

• 第二步：修复依赖版本
  如果版本不匹配，执行以下命令重装匹配的依赖：

npm install webpack@5 webpack-cli@latest webpack-dev-server@4 --save-dev

• 第三步：修正Edge浏览器的open配置写法
  不同操作系统下Edge浏览器的识别名称不同，你当前写的edge无法被跨系统识别，按你的操作系统修改对应配置：

  • Windows系统：

  open: {
      app: {
          name: "msedge"
      }
  }
  

  • macOS系统：

  open: {
      app: {
          name: "Microsoft Edge"
      }
  }
  

  • Linux系统：

  open: {
      app: {
          name: "microsoft-edge"
      }
  }
  

• 第四步：排查其他覆盖配置
  检查package.json中的scripts字段里的serve命令是否添加了--port之类的参数覆盖配置，同时检查项目根目录是否有.env文件设置了PORT环境变量，也会覆盖配置文件中的端口设置。

以上步骤执行完成后重新运行npm run server即可看到配置生效。

内容的提问来源于stack exchange，提问作者NeoZoom.lua