如何为Webpack Dev Server的主机URL附加URL参数？

你之前修改host字段的方式行不通，因为host仅用于指定服务器主机地址，并不支持携带URL参数。正确的做法是利用Webpack Dev Server的open配置项来指定启动浏览器时打开的完整URL。

基础配置方法（适用于Webpack Dev Server v4+） #

直接在devServer配置中添加open字段，设置为带参数的完整URL即可：

...
{
  static: path.resolve(__dirname, "../public"),
  host: "localhost",
  hot: true,
  port: 8080,
  // 添加这一行，指定带参数的目标URL
  open: "http://localhost:8080/?developer=John"
}
...
target: "web"

动态拼接写法（适配变量化的host/port） #

如果你的host或port是通过变量定义的，可以用模板字符串拼接，避免硬编码：

const host = "localhost";
const port = 8080;

...
{
  static: path.resolve(__dirname, "../public"),
  host: host,
  hot: true,
  port: port,
  open: `http://${host}:${port}/?developer=John`
}
...

进阶：指定打开的浏览器（可选） #

如果需要指定特定浏览器启动，可使用open的对象配置形式：

...
{
  static: path.resolve(__dirname, "../public"),
  host: "localhost",
  hot: true,
  port: 8080,
  open: {
    target: `http://localhost:8080/?developer=John`,
    app: {
      name: "chrome" // 可替换为firefox、edge等浏览器名称
    }
  }
}
...

配置完成后，启动Webpack Dev Server时，浏览器会自动打开带有指定参数的URL，无需手动添加。

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