揭开Webpack5模块联邦的神秘面纱：携手打造敏捷的微前端应用

2023-01-06 11:33:33

揭开 Webpack 5 模块联邦的神秘面纱：构建现代化微前端应用程序

在构建现代化前端应用程序的道路上，模块化和灵活性至关重要。在这一领域，Webpack 5 模块联邦的出现可谓一场技术革命，为微前端架构开辟了新的篇章。

本篇文章将深入探讨 Webpack 5 模块联邦，从基本配置到打包产物分析，再到网络请求和源码追踪，为你全面揭开它的奥秘。

基本配置：搭建微前端舞台

就像烹饪一道美味佳肴，构建模块联邦也需要遵循特定的“配方”。首先，我们需要在 Webpack 的配置文件中配置模块联邦的选项。

// webpack.config.js
module.exports = {
  // ... 其他配置
  output: {
    ...
    publicPath: 'http://localhost:9000/', // 主应用的公共路径
  },
  devServer: {
    port: 9000,
    historyApiFallback: true,
  },
  moduleFederation: {
    name: 'app1', // 主应用名称
    remotes: {
      'app2': 'http://localhost:9001/remoteEntry.js', // 子应用名称及其远程入口文件路径
    },
    shared: {
      react: {
        singleton: true, // 确保只有一个版本的 React 被加载
      },
      'react-dom': {
        singleton: true,
      },
    },
  },
};

通过这些配置，我们搭建好了微前端架构的舞台，让主应用和子应用能够和谐共处，共享依赖，协同运行。

打包产物分析：揭秘代码的秘密

当 Webpack 构建完成后，让我们一探究竟，看看生成的产物究竟是什么样子。

主应用： 在主应用的 dist 文件夹中，我们可以找到名为 "main.js" 和 "vendors~~main.js" 的文件。其中，"main.js" 包含了主应用的代码，而 "vendors~~main.js" 则包含了主应用和子应用共享的依赖库。
子应用： 在子应用的 dist 文件夹中，我们可以找到名为 "remoteEntry.js" 的文件。这个文件就是子应用的远程入口文件，它包含了子应用的代码和模块联邦的配置信息。

通过分析打包产物，我们可以进一步了解模块联邦是如何工作的。

网络请求与源码追踪：窥探运行时行为

当主应用加载子应用时，会向子应用的远程入口文件发出一个网络请求。在这个过程中，子应用的代码和模块联邦的配置信息会被加载到主应用中。

接下来，主应用会根据模块联邦的配置信息，动态加载子应用所需的依赖库。这些依赖库可能是从主应用的 CDN 中加载，也可能是从子应用的 CDN 中加载。

当子应用的所有依赖库都加载完成之后，主应用就会将子应用的代码执行起来。这样，子应用就成功地加载到了主应用中，并且可以正常运行了。

模块联邦的优势

模块联邦的出现带来了诸多优势，包括：