如何获取 webpack 开发服务器所提供的 URL？

Question

本地运行webpack开发服务器时，部分输出为：

ℹ ｢wds｣: webpack output is served from https://some-url.com:4322/

有没有办法在我的应用程序中以编程方式获取此主机 URL？

Answer 1

当您通过 webpack 提供应用程序时，您可以通过 CLI 标志 (

webpack serve --mode development --config webpack.dev.js --port 5000 --host localhost

) 或 webpack 开发配置文件中的 devServer 对象指定要用于提供应用程序服务的端口和主机，如下所示。

module.exports = {
  devServer: {
    port: 8001,
    ...
  },
};

在输出中获取“webpack 输出由 http://xyz 提供”行假定您使用这两种方法之一正确配置了 webpack 服务命令。由于您已经知道您自己选择的主机和帖子，因此需要以编程方式访问它们是毫无意义的。

如果出于某种原因您确实必须在 Web 应用程序中以编程方式执行此操作，您可以简单地在任何 javascript / typescript 脚本中访问

window.location

DOM 属性，这将允许您解析主机名 (

window.location.hostname

) 和端口 (

window.location.port

）。 https://developer.mozilla.org/en-US/docs/Web/API/Location

Answer 2

devServer

onListening

方法接收一个

devServer

对象，其中包含对当前

compiler

的引用。因为它是一个引用，所以我们可以将活动端口分配回

compiler.options

，然后在 webpack 的编译生命周期（包括插件）中稍后访问该值。

export default {
  devServer: {
    host: "0.0.0.0",
    port: "auto",

    onListening: (devServer) => {
      const port = devServer.server.address().port;
      devServer.compiler.options.devServer.port = port;

      console.log("Listening on auto-port:", port);
    },
  },
};

传递给插件的

compiler

参数现在将包含自动选择的端口。apply