使用场景

同一域名，不同path，不同项目。常用于以path的，路由分发式微前端项目。

开发环境配置

本方案采用 w2 的方案，使用域名方式来开发。

项目A的.env.development文件如下:

PUBLIC_URL='/landing/edit/'
WDS_SOCKET_PATH="/landing/edit"
BROWSER=none

项目B的.env.development文件如下:

PUBLIC_URL='/landing/templates/'
WDS_SOCKET_PATH="/landing/templates"
BROWSER=none

w2文件的配置为:

127.0.0.1:3100 xx.ai.mi.com/landing/templates/
ws://xx.ai.mi.com/landing/templates ws://127.0.0.1:3100/landing/templates

127.0.0.1:3000 xx.ai.mi.com/landing/edit/
ws://xx.ai.mi.com/landing/edit ws://127.0.0.1:3000/landing/edit

CRA配置到webpack-dev-server的配置

webpack-dev-server本身支持sockpath的配置，详情见链接。

module.exports = {
  //...
  devServer: {
    sockPath: '/socket',
  }
};

而CRA(create-react-app)可以完整的开发集成环境，它包括不限于webpack的定制。只需要在CRA将值传递给webpack-dev-server就可以支持对应的sockPath

对应的代码见CRA的MR