webpack5 模块联邦技术 | Coding Your Life

1. 项目准备

至少创建两个项目，分别作为容器应用（承载其他微应用）和远程应用（可被容器应用或其他应用引用）。比如命名为 container - app 和 remote - app 。

2. 安装依赖

在每个项目的根目录下，安装必要的 Webpack 相关依赖：

1	npm install webpack webpack-cli html - webpack - plugin webpack - dev - server - D

这些是开发时依赖，用于项目构建和开发服务器启动等功能。

3. 配置远程应用（以 `remote - app` 为例）

在 webpack.config.js 中进行如下配置：

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
    
    plugins: [
        new ModuleFederationPlugin({
            name: '远程应用名称', 
            filename: '远程入口文件名.js', 
            exposes: {
                
                './ModuleName': './src/具体模块路径', 
            },
            shared: {
                
                
            }
        })
    ]
};

4. 配置容器应用（以 `container - app` 为例）

同样在 webpack.config.js 中配置：

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
    
    plugins: [
        new ModuleFederationPlugin({
            name: '容器应用名称',
            remotes: {
                
                
            },
            shared: {
                
                
            }
        })
    ]
};

5. 构建应用

在远程应用和容器应用的项目目录下，分别运行构建命令：

1	npx webpack

构建完成后，远程应用会生成包含暴露模块信息的 remoteEntry.js 等文件；容器应用也会完成自身构建并准备好加载远程模块。

6. 在容器应用中使用远程模块

在容器应用的代码中，使用动态导入来加载远程模块：


async function loadRemoteModule() {
    const remoteModule = await import('remoteAppAlias/./ModuleName');
    
    remoteModule.default.someFunction(); 
}

7. 开发服务器运行（可选）

为方便开发调试，可在容器应用和远程应用中分别启动开发服务器：

1	npx webpack - dev - server

在实际项目中，还需考虑以下方面：

路由配置：合理配置容器应用和远程应用的路由，确保模块加载和页面跳转正常。比如使用 React Router 等路由库进行配置。
错误处理：在模块加载过程中，处理可能出现的网络错误、模块未找到等异常情况，提高应用稳定性。
版本管理：对于共享依赖，要仔细管理版本，避免版本冲突。可在 shared 配置中明确依赖版本要求，或使用工具辅助版本管理。

推荐订阅源

Coding Your Life