使用Webpack模块联合构建模块化门户

Our team is part of the Transport teams within the Logistics department, where we build and manage software for internal users, including finance teams, warehouses, and, in the future, our third-party partners. The portal software is designed to streamline operations across these teams, providing tools and features that improve workflow efficiency and collaboration.

我们的团队是物流部门内运输团队的一部分，我们为内部用户（包括财务团队、仓库以及未来的第三方合作伙伴）构建和管理软件。门户软件旨在简化这些团队的操作，提供改进工作流程效率和协作的工具和功能。

We decided to use Webpack Module Federation while building a modular portal to address the challenges of scalability and development autonomy. Modularity was key to enabling independent feature development and deployment across teams. In this blog post, we’ll share the reasoning behind this choice, the process, and the lessons we learned along the way.

我们决定在构建模块化门户时使用Webpack Module Federation，以解决可扩展性和开发自主性方面的挑战。模块化是实现跨团队独立功能开发和部署的关键。在这篇博客文章中，我们将分享做出这一选择的原因、过程以及我们在此过程中学到的经验。

Overview

概述

Webpack Module Federation allows for sharing code dynamically between applications at runtime without needing to rebuild the host app or statically link all modules, enabling micro frontends. This flexibility played a crucial role in the architecture of our portal project.

Webpack Module Federation 允许在运行时在应用程序之间动态共享代码，而无需重建主应用程序或静态链接所有模块，从而实现微前端。这种灵活性在我们门户项目的架构中起到了关键作用。

1. The Challenge

1. 挑战

Project Scope

项目范围

Our portal project involved collaboration between five different teams, with each team responsible for different applications. Some of these applications were brand new, while others had legacy code that required continued support. For example, certain applications were still being used within iframes in other portals, adding complexity to the integration. The critical aspect of modularity was to ensure that each team could independently develop and deploy their applications without affecting the main portal. This independence was key to maintaining flexibility, especially as teams needed to update their applications without touching the portal itself.

我们的门户项目涉及五个不同团队之间的合作，...