dev.client#

配置 Rsbuild 在开发过程中注入的 client 代码，可以用于设置热更新对应的 WebSocket URL。

• 类型：

type Client = {
  /** 指定 WebSocket 请求的协议名称 */
  protocol?: 'ws' | 'wss';
  /** 指定 WebSocket 请求的路径 */
  path?: string;
  /** 指定 WebSocket 请求的端口号 */
  port?: string;
  /** 指定 WebSocket 请求的 host */
  host?: string;
  /**
   * 当出现编译错误时，在浏览器中显示遮盖
   * 该功能需要当前浏览器版本支持 [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
   */
  overlay?: boolean;
};

• 默认值：

const defaultConfig = {
  path: '/rsbuild-hmr',
  // 默认为开发服务器的端口号
  port: '',
  host: location.hostname,
  protocol: location.protocol === 'https:' ? 'wss' : 'ws',
  overlay: true,
};

配置 WebSocket URL#

默认情况下，当你启动 dev server，并访问 http://localhost:3000/ 时，页面上会发起一个 WebSocket 请求，指向 ws://localhost:3000/rsbuild-hmr，使页面与开发服务器建立连接。

在某些开发场景下，你可能需要调整 WebSocket URL，来保证 WebSocket 请求能够正确连接。

比如当你使用代理工具进行开发时，实际访问的可能是一个线上域名，此时你可以手动配置 dev.client，将 WebSocket URL 指向本地的开发服务器。下面是一个示例，WebSocket 请求的地址为 ws://127.0.0.1:3000/rsbuild-hmr：

export default {
  dev: {
    client: {
      protocol: 'ws',
      // 通常使用 `127.0.0.1`，可以避免跨域请求被浏览器拦截
      host: '127.0.0.1',
    },
  },
};

hot-update 文件#

在热更新过程中，页面会发起 GET 请求来获取 hot-update 文件，包括 *.hot-update.json 和 *.hot-update.js。这些文件包含了热更新所需的信息，比如被更新的模块、模块的代码等。

hot-update 文件属于静态资源，如果你需要配置 hot-update 文件的 URL，请使用 dev.assetPrefix 选项。