reactjs - 模块联合：webpack.config 中可能带有 slug 的远程 url？

Question

我希望使用模块联合在我的主机应用程序中使用来自远程应用程序的组件。是否可以动态更改 webpack.config 文件中的远程 url 以包含可以在运行时更改的 slug？

Webpack 配置文件

  plugins: [
    new ModuleFederationPlugin(
      {
        name: 'MFE2',
        filename:
          'remoteEntry.js',
        remotes: {
          MFE1:
            'MFE1@http://localhost:8083/remoteEntry.js',
        },
      }
    ),
    new HtmlWebpackPlugin({
      template:
        './public/index.html',
    }),
  ],

从上面的示例中，我想更改远程 url 以从 localhost:8083/[slug]/remoteEntry.js 中提取组件

不确定模块联合是否支持包括基于 url 中的 slug 创建的组件？

任何帮助表示赞赏！

Answer 1

简而言之，你目前不能这样做，因为 webpack 在构建时完成它的工作，并且 url 被烘焙到包中。

关于此功能的票

他们的跟踪器上有一个关于此的未解决问题， 以便在运行时解决某种模板问题。

解决方法

有一个使用高级 api 进行动态模块加载的官方示例，您完全避免在 webpack 配置中使用“远程”，并在您的代码中进行模块加载并根据需要计算 URL。

完整的例子

简化示例