webpack-dev-server：如何通过Node.js API自动打开浏览器？

我来帮你排查下这个自动打开浏览器失效的问题，结合你的代码来看，可能有这几个方向可以调整：

1. 适配webpack-dev-server版本（重点排查） #

如果你的webpack-dev-server是v4及以上版本，原来的contentBase配置已经被官方废弃，需要替换成static。这个配置项失效可能会连带影响open属性的触发逻辑，修改后的options应该是这样：

const options = {
  static: './dist', // 替换contentBase为static
  hot: true,
  hotOnly: true,
  open: true,
  host: 'localhost'
};

2. 明确指定目标浏览器 #

有时候系统默认浏览器的关联可能出问题，你可以直接指定要打开的浏览器，比如强制打开Chrome：

const options = {
  static: './dist',
  hot: true,
  hotOnly: true,
  open: 'Chrome', // 换成你常用的浏览器，比如'Firefox'
  host: 'localhost'
};

注意不同系统的浏览器名称有差异：Windows下写'chrome'即可，Mac下可以写'Google Chrome'。

3. 改用命令行参数强制触发 #

如果配置文件的调整没效果，你可以直接在启动脚本里加命令行参数，这种方式优先级更高，能绕过配置可能存在的冲突。比如在package.json的scripts里这样写：

"scripts": {
  "start": "webpack serve --open"
}

最后记得修改配置后重启dev server，确保新配置生效哦～

内容的提问来源于stack exchange，提问作者李鸿章