# 资源共享
Webpack 5 Module Federation 模块联合允许 JavaScript 应用程序在客户端和服务器上动态运行来自另一个包/构建的代码, 简单来说就是允许运行时动态决定代码的引入和加载。
功能：之前 webpack 对外只提供了一个全局的 webpackJsonp 数组(注意不是方法)，每个异步 chunk 加载后通过该数组将自身的 modules push 到内部 webpack_modules 对象上，内部变量可以访问到该对象，但外部是无法获取到的，完全属于“暗箱操作”，这也导致了无法跟外界环境进行模块“共享”，webpack5 中引进了模块联合机制, 可以让构建后的代码动态运行的跑在另一份代码中。
目的：通过细化功能模块、组件复用、共享第三方库、runtime dependencies 线上加载 npm 包等，可以更好的服务于多页应用、微前端等开发模式。
业务场景:
- 多个业务依赖同一个通用组件
# MF VS npm 包管理模式
问题一: 历史代码: 业务不依赖 npm, 没办法引入 npm 包
问题二: 发布效率: 如果 npm 包升级, 还是需要同时升级 n 多个业务
# MF VS sdk 模式
参考 jquery 的引入方式，我们用另外一个项目去实现这些功能，然后把代码打包成 ES5 代码，对外提供很多接口，然后在各个品类页，引入我们提供的加载脚本，内部会自动去加载文件，获取每个模块的 js 文件的 CDN 地址并且加载。这样做到各个模块各自独立，并且所有模块和各个品类形成独立。
问题一: 依赖冲突: 比如 sdk 依赖
babel-ployfill与网页依赖的版本不一致, 会脚本导致加载失败问题二: 依赖冗余: 比如一个页面引入 4 个 sdk, 每个 sdk 都依赖了
jquery, 那么其实要引入 4 遍jquery