webpack高级应用篇（十三）：模块联邦（Module Federation）- 未来组件包更新解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_84411522/article/details/138966225

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

return str;
};


**src/index.js**

import Home from ‘./Home’;

const home = document.createElement(‘h1’);
home.textContent = ‘这里是 App1 的 Home 模块：’;
document.body.appendChild(home);
document.body.innerHTML += Home(5);


**webpack.config.js**

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {
mode: ‘production’,
entry: ‘./src/index.js’,
devServer: {
port: ‘3000’,
},
plugins: [
new HtmlWebpackPlugin(),
],
};


执行 `npx webpack serve`


![在这里插入图片描述](https://img-blog.csdnimg.cn/13bb58371f1f47ea9356eec6a1540424.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LqU6JmO5oiY55S75oif,size_20,color_FFFFFF,t_70,g_se,x_16)  
   
  
   



#### APP2


**目录**

├── src
│ ├── Header.js
│ └── index.js
└── webpack.config.js


**src/Header.js**

export default () => {
const header = document.createElement(‘h1’);
header.textContent = ‘这里是app2 的 Header 模块’;
return header;
};


**src/index.js**

import Header from ‘./Header’;

const div = document.createElement(‘div’);
div.appendChild(Header());
document.body.appendChild(div);


**webpack.config.js**

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {
mode: ‘production’,
entry: ‘./src/index.js’,
devServer: {
port: ‘3001’,
},
plugins: [
new HtmlWebpackPlugin(),
],
};


执行 `npx webpack serve`  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/19758844200c4d9b81a19594ea193fdc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LqU6JmO5oiY55S75oif,size_20,color_FFFFFF,t_70,g_se,x_16)  
   
  
   



### 使用模块联邦


#### APP2


**webpack.config.js**

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const { ModuleFederationPlugin } = require(‘webpack’).container;

module.exports = {
mode: ‘production’,
entry: ‘./src/index.js’,
devServer: {
port: ‘3001’,
},
plugins: [
new HtmlWebpackPlugin(),

new ModuleFederationPlugin({
  // 模块联邦名字，提供给其他模块使用
  name: 'app2',
  // 提供给外部访问的资源入口
  filename: 'App2RemoteEntry.js',
  // 引用的外部资源列表
  remotes: {},
  // 暴露给外部的资源列表
  exposes: {
    /\*\*

* ./Header 是让外部应用使用时基于这个路径拼接引用路径，如：App2/Header
* ./src/Header.js 是当前应用的要暴露给外部的资源模块路径
*/
‘./Header’: ‘./src/Header.js’,
},
// 共享模块，值当前被 exposes 的模块需要使用的共享模块，如lodash
shared: {},
}),
],
};


  

#### APP1

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const { ModuleFederationPlugin } = require(‘webpack’).container;

module.exports = {
mode: ‘production’,
entry: ‘./src/index.js’,
devServer: {
port: ‘3000’,
},
plugins: [
new HtmlWebpackPlugin(),

new ModuleFederationPlugin({
  // 模块联邦名字，提供给其他模块使用
  name: 'app1',
  // 提供给外部访问的资源入口
  filename: 'App1RemoteEntry.js',
  // 引用的外部资源列表
  remotes: {
    /\*\*

* App2 引用其他应用模块的资源别名
* app2 是 APP2 的模块联邦名字
* http://localhost:3001 是 APP2 运行的地址
* App2RemoteEntry.js 是 APP2 提供的外部访问的资源名字
* 可以访问到 APP2 通过 exposes 暴露给外部的资源
*/
App2: ‘app2@http://localhost:3001/App2RemoteEntry.js’,
},
// 暴露给外部的资源列表
exposes: {},
// 共享模块，如lodash
shared: {},
}),
],
};


**src/index.js**





### React

*   介绍一下react

*   React单项数据流

*   react生命周期函数和react组件的生命周期

*   react和Vue的原理，区别，亮点，作用

*   reactJs的组件交流

*   有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

*   项目里用到了react，为什么要选择react，react有哪些好处

*   怎么获取真正的dom

*   选择react的原因

*   react的生命周期函数

*   setState之后的流程

*   react高阶组件知道吗？

*   React的jsx，函数式编程

*   react的组件是通过什么去判断是否刷新的

*   如何配置React-Router

*   路由的动态加载模块

*   Redux中间件是什么东西，接受几个参数

*   redux请求中间件如何处理并发

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/9749ea39072fc4b7b27af6f3a4db5ab1.png)