基于Webpack5 Federated Module的微服务框架

本文章主要围绕emp使用进行介绍，主要记录使用emp框架一些搭建过程

准备工作

emp 仓库链接: https://github.com/efoxTeam/e...
可根据 README 完成初步框架的创建 创建工程 anyun-main 选择模版 react

基础调整

由于emp默认创建的react工程版本是16，所以需要删除默认包，重新安装最新版本 备注：不想升级可忽略此步骤

1.yarn remove react react-dom react-router-dom
2.yarn add react react-dom react-router-dom
3.yarn remove @types/react @types/react-dom  @types/react-router-dom
4.yarn add -D @types/react @types/react-dom  @types/react-router-dom

• 打开emp-config.js文件

shared: {
- react: {eager: true, singleton: true, requiredVersion: '^16.13.1'},
+ react: {eager: true, singleton: true, requiredVersion: '^17.0.1'},
- 'react-dom': {eager: true, singleton: true, requiredVersion: '^16.13.1'},
+ 'react-dom': {eager: true, singleton: true, requiredVersion: '^17.0.1'},
- 'react-router-dom': {requiredVersion: '^5.1.2'},
+ 'react-router-dom': {requiredVersion: '^5.2.0'},
},

其他

项目中如果使用了@别名，需要在emp-config.js增加以下代码

config.resolve.alias.set('@', path.resolve('./', 'src'))

在webpack5中是默认没有node的core module，如果使用了这些核心库。需要在emp-config.js增加这些核心库，代码如下：

config.resolve.alias
    .set('zlib',"browserify-zlib")
    .set('assert', "assert")
    .set('buffer', "buffer")
    .set('util', "util")
    .set('stream', "stream-browserify")
    .set('timers', "timers-browserify")

设置source-map

config.devtool(empEnv === 'dev' ? 'nosources-source-map' : false)

相关文章

EMP微前端-带你快速入门
Webpack Module Federation属性介绍