关于模块联邦的理解草稿

模块联邦（Module Federation）是 Webpack5 的一个新功能，支持将当前项目的部分模块或 lib 单独导出并打包得到远程构建产物，其他项目可以从指定的远程构建产物中导入模块。

关注的几个问题：

导出模块，是否会导致模块代码加载？
远程加载，如何保证模块版本的正确性和稳定性？

# 新瓶装旧酒：模块联邦不是黑科技【WIP】

模块联邦是一个内置的 Webpack 插件，

要想将项目的模块共享给其他模块，我们需要调整打包流程。

需要哪些信息？模块入口和模块名是要的，这样才能得到一份独立的构建产物。

// 导出方配置
const { ModuleFederationPlugin } = require('webpack').container;

new ModuleFederationPlugin({
    name: 'aaa_app',
    filename: 'aaaEntry.js',
    exposes: {
      './Button': './src/Button.jsx',
    }
})


// 引入方配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14

publicPath 也是要配的，entry 文件中寻找依赖，默认用的是 / ，在其他项目就找不到了。

一旦独立构建了，那这个模块依赖的其他模块会被一起打包进去么？想想也知道肯定会，不然其他项目使用该模块的时候就缺依赖了。

那这样不是会导致重复代码加载？

# 思想上是一个创新【WIP】

# 存在的问题【WIP】

无法极致打包？
多版本和缓存问题？

# 继续学习

官方文档：https://webpack.docschina.org/concepts/module-federation/
示例仓库：https://github.com/module-federation/module-federation-examples

# 拓展阅读

编辑

#金石计划

上次更新: 2024/09/01, 23:56:56

← sideEffect和treeShake 常用插件→