模块联邦
webpack5 新增了模块联邦的能力,项目之间形成共享作用域,可以在一个项目里使用其他项目中的组件,实现跨应用的组件共享。项目A引用了项目B中的组件,A为宿主系统,B为远程系统,通过在B中暴露模块,在A中配置引入的项目名以及引用的组件等,这样在A的业务代码中可以直接通过 import() 来引入组件。
使用vue-cli创建了两个项目,app3引入了app4中的组件
这是被引用的项目,app4中的组件
const { ModuleFederationPlugin } = require("webpack").container;
module.exports = {
publicPath: "http://localhost:8081/", // 路径是该项目的端口号,在app3中被引用时路径是该路径,不配置的话就是app3的端口号,会404
configureWebpack: {
plugins: [
new ModuleFederationPlugin({
name: 'app4', // 当前的应用名
filename: 'entry.js', // 在被别的项目引用的时候的文件名
exposes: { // 暴露的组件
"./MyCmp": './src/components/MyCmp'
},
shared: ['lodash', 'moment'] // 共享的包
})
],
devServer: {
port: 8081
}
},
}
在app3中的配置
const ModuleFederationPlugin =
require("webpack").container.ModuleFederationPlugin;
module.exports = {
configureWebpack: {
plugins: [
new ModuleFederationPlugin({
name: 'app3', // 当前的项目名
remotes: { //需要引用的远程应用
app4: 'app4@http://localhost:8081/entry.js' // 要用被引用的项目名@路径/app4中的filename名字,作为入口文件
},
shared: ['moment']
})
]
},
}
使用remotes中的key/模块名的格式引入,注册组件之后可以像普通组件一样使用
如果不在webpack配置中直接配置,可以通过动态引入的方式,webpack官网
在项目中引入entry.js这个文件,引入后,在对组件动态引入的过程中会连接到和远程项目的共享容器,获取到可引入的模块