webpack5 moduleFederation 使用
简介:
在hostApp中暴露要给其他应用使用的模块,其他应用(clientApp)引入hostApp暴露的文件。在clientApp中像使用本地模块一样使用远程模块。HostApp和ClientApp 可互为host/client。即同一个应用,可同时提供/使用远程模块。
上代码:
依赖 package.json:
{
// ... otherConfig
devDependencies:{
// ... otherDevDependencies
// "html-webpack-plugin": "^4.3.0", 踩坑:使用html-webpack-plugin 版本要用^4.3.0
"vue-loader": "^15.9.3",
"webpack": "^5.0.0-beta.25",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
hostApp:
1.配置webpack.config.js
// webpack.config.js
// 踩坑:使用vue的话,这里要改成以下方式
const VueLoaderPlugin = require('vue-loader/lib/plugin-webpack5');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
{
...otherConfig,
output:{
publicPath:hostAppPath // hostApp访问路径,需要带域名/ip端口号 eg: http://localhost:9003/
},
...otherConfig,
plugins:[
...otherConfig,
new ModuleFederationPlugin({
// 导出包名
name: 'hostApp',
library: { type: 'var', name: 'hostApp' },
// 入口文件名
filename: 'remoteEntry.js',
// 要导出的内容
exposes: {
// 模块名及模块的路径,模块名前面要加 "./" ,使用时 直接包名/模块名即可
// use: import('hostApp')
'.':'./src/container',
// use: import('hostApp/container')
'./container': './src/container.js',
// user: import('hostApp/path/path2')
'./path/path2': './src/container.js'
}
})
]
}
2.写暴露的远程模块对应的文件
// ./src/container.js
import comp from './comp' // vue组件
import util from './util' // js文件
export default comp
export util
clientApp:
1.在index.html中引入远程模块的入口文件
<!-- index.html -->
<!-- 仅在hostApp配置了optimization.runtimeChunk时添加 -->
<script src="{{hostAppPath}}/{{optimization.runtimeChunk.name}}"></script>
<!-- 这句是必须的,引入hostApp的远端入口文件 -->
<script src="{{hostAppPath}}/remoteEntry.js"></script>
2.配置webpack.config.js
// webpack.config.js
new ModuleFederationPlugin({
name: 'clientApp',
// 在这里声明远程模块
remotes: {
hostApp: "hostApp",
},
})
3.使用
// otherjsfile.js
const container = await import('hostApp/container')
let comp = container.default
let util = container.util
// othervue.js
<template>
<comp></comp>
</template>
<script>
export default {
components:{
comp:()=>import('hostApp/container')
}
}
</script>
<style>
</style>