时间:2021-05-26
本文主要介绍webpack 5 的新特性之一 "module federation"(联邦模块),涉及联邦模块特性、使用方法、适用范围。
特性
webpack 5引入联邦模式是为了 更好的共享代码 。 在此之前,我们共享代码一般用npm发包来解决。 npm发包需要经历构建,发布,引用三阶段,而联邦模块可以 直接引用其他应用代码 ,实现热插拔效果。对比npm的方式更加简洁、快速、方便。
使用方法
引入远程JS
假设我们有app1,app2两个应用,端口分别为3001,3002。 app1应用要想引用app2里面的js,直接用script标签即可。
例如app1应用里面index.html引入app2应用remoteEntry.js
<head> <script src="http://localhost:3002/remoteEntry.js"></script> </head>webpack配置
app1的webpack配置:
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); module.exports = { //.... plugins: [ new ModuleFederationPlugin({ name: "app1", library: { type: "var", name: "app1" }, remotes: { app2: "app2", }, shared: ["react", "react-dom"], }), ],};对于app2的webpack配置如下
plugins: [ new ModuleFederationPlugin({ name: "app2", library: { type: "var", name: "app2" }, filename: "remoteEntry.js", exposes: { "./Button": "./src/Button", }, shared: ["react", "react-dom"], }) ],可以看到app1和app2的配置基本相同,除了app2 多了filename和exposes以外。
参数解释
模块使用
对于app1/App.js代码使用app2的组件,代码如下:
import React from "react";const RemoteButton = React.lazy(() => import("app2/Button"));const App = () => ( <div> <h1>Basic Host-Remote</h1> <h2>App 1</h2> <React.Suspense fallback="Loading Button"> <RemoteButton /> </React.Suspense> </div>);export default App;具体这一行
const RemoteButton = React.lazy(() => import("app2/Button"));使用方式为:import('远程应用名/暴露的模块名'),对应webpack配置里面的name和expose。使用方式和引入一个普通异步组件无差别。
适用范围
由于share这个属性的存在,所以本地应用和远程应用的技术栈和版本必须兼容,统一用同一套。比如js用react,css用sass等。
联邦模块和微前端的关系:因为expose这个属性即可以暴露单个组件,也可以把整个应用暴露出去。同时由于share属性存在,技术栈必须一致。所以加上路由,可以用来实现single-spa这种模式的微前端。
使用场景:新建专门的组件应用服务来管理所有组件和应用,其他业务层只需要根据自己业务所需载入对应的组件和功能模块即可。模块管理统一管理,代码质量高,搭建速度快。特别适用矩阵app,或者可视化页面搭建等场景。
例子的 github地址
到此这篇关于webpack5 联邦模块介绍详解的文章就介绍到这了,更多相关webpack5 联邦模块 内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下:开始npmisass-loadernode-sasspostc
上一篇介绍了如何使用webpack搭建一个稳定的支持本地服务、自动刷新、模块热替换、使用ES6编写JavaScript的开发环境,本篇主要介绍webpack如何
一、概念介绍本质上,webpack是一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当webpack处理应用程序时,它会递归
Spring框架七大模块简单介绍Spring中MVC模块代码详解ORM模块对Hibernate、JDO、TopLinkiBatis等ORM框架提供支持ORM模块
本文介绍了react-webpack2-热模块替换[HMR],分享给大家,具体如下:模块热替换功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载页面