了解 webpack5 模块联邦

了解 webpack5 模块联邦

webpack5有一项令人激动的新特性：模块联邦 module federation，看看他能做些什么

应用场景

可以解决跨项目的相互依赖，假设目前有两个项目 app1 和 app2，app1 想使用 app2 项目里的某个组件比如 src/components/Button.js。我们可能会将 components 拆成公共的组件库分别在 app1、app2 里引入，但是维护和更新组件库会比较啰嗦，提取每一个模块也可能会造成过度抽象，但是模块联邦可以无痛解决这个问题。

使用

webpack5 官方文档里还没有相应的介绍，先推荐一个示例仓库 module-federation-examples ，里面有多个场景的完整用例。

简单使用

app1 依赖 app2 的模块：

  // app1/webpack.config.js
    new ModuleFederationPlugin({
      name: "app1",
      library: { type: "var", name: "app1" },
      remotes: {
        app2: "app2"
      },
      shared: ["react", "react-dom"]
    }),

  // app2/webpack.config.js
    new ModuleFederationPlugin({
      name: "app2",
      library: { type: "var", name: "app2" },
      filename: "remoteEntry.js",
      exposes: {
        Button: "./src/Button",
      },
      shared: ["react", "react-dom"]
    }),

介绍一下用到的配置

• name 模块名
• library 这个配置比较迷，目前看到的用法有 { type: "var" } { type: "commonjs-module" }，可以用来指定模块的使用规范
• remotes 需要依赖的模块名
• filename app1 使用 app2 模块的入口，app1 需要先加载 remoteEntry.js
• exposes app2 暴露出的模块，可以有多个
• shared app2 打包暴露模块时，不会将 shared 打包，app2 的 Button 将使用 app1 里的 react

怎么实现的跨应用依赖

首先通过上面的配置，app2 会打包出体积很小的，记录着 app2 所有模块信息的 remoteEntry.js，app1 需要先引入这份 remoteEntry.js。app1 在运行时，发现依赖了 app2/Button ，此时通过 remoteEntry.js 查找出 Button.js 打包后对应的地址并加载执行就 OK 了。

可以看出，依赖是运行时的，在需要的时候按照 remoteEntry.js 记录的信息来加载模块。remoteEntry.js 体积较小，不应该被缓存，以确保 app1 能够拿到最新的 app2 代码。app2 更新之后，app1 不需要任何修改，就可以使用到新版本的 app2 代码。

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!