如何以编程方式获取webpack dev server提供服务的URL？

当然可以，这里有几种实用方法：

• 通过Webpack的DefinePlugin注入全局变量
  在webpack.config.js中，用DefinePlugin把Dev Server的URL直接注入到应用代码的全局环境里。示例配置：

  const webpack = require('webpack');
  
  // 可以直接写死，或者从devServer配置动态拼接
  const devServerConfig = {
    host: 'some-url.com',
    port: 4322,
    https: true
  };
  const devServerUrl = `${devServerConfig.https ? 'https' : 'http'}://${devServerConfig.host}:${devServerConfig.port}/`;
  
  module.exports = {
    // 其他Webpack配置...
    plugins: [
      new webpack.DefinePlugin({
        'WDS_SERVER_URL': JSON.stringify(devServerUrl)
      })
    ],
    devServer: devServerConfig
  };
  

  之后在你的应用代码里，直接用WDS_SERVER_URL就能拿到这个URL。

• 运行时通过window.location直接获取
  如果你的应用是直接从Webpack Dev Server加载的，window.location.origin会返回当前页面的协议、主机和端口组合（比如https://some-url.com:4322），再加上斜杠就是你要的完整URL。这种方式不需要修改Webpack配置，简单直接。

• 自定义启动脚本中通过Dev Server API获取
  要是你用自定义Node脚本启动Dev Server，可以直接从配置实例中提取URL：

  const WebpackDevServer = require('webpack-dev-server');
  const webpack = require('webpack');
  const config = require('./webpack.config.js');
  
  const compiler = webpack(config);
  const devServer = new WebpackDevServer(config.devServer, compiler);
  
  devServer.start().then(() => {
    const serverUrl = `${config.devServer.https ? 'https' : 'http'}://${config.devServer.host}:${config.devServer.port}/`;
    console.log('Dev Server运行地址:', serverUrl);
    // 这里可以把URL传递给应用，比如写入环境变量或者通过其他IPC方式
  });
  

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