首页
前端开发
Webpack
基于外部插件实现Webpack模块联邦运行时远程源动态配置

基于外部插件实现Webpack模块联邦运行时远程源动态配置

19 次浏览 0 条评论
zip
zip

模块联邦为微前端架构提供了一种全新的解决方案，允许 JavaScript 应用在运行时从另一个应用加载代码。External Remotes 插件则更进一步，支持在应用运行时动态设置远程源，从而实现更灵活的模块加载策略。

在 Webpack 配置文件中，通过 ExternalTemplateRemotesPlugin 插件可以启用该功能。例如，以下配置演示了如何在名为 app1 的应用中，动态加载名为 app2 的远程应用： 

const config = { 
  // ... 其他配置 
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      remotes: {
        app2: "app2@[window.app2Url]/remoteEntry.js"
      }
    }),
    new ExternalTemplateRemotesPlugin(), 
  ]
};

上述配置中，app2 的入口文件地址通过 window.app2Url 变量动态获取，该变量可以在运行时根据实际情况进行设置，从而实现对不同环境或版本的 app2 应用进行灵活加载。

zip 文件大小：4.15KB