学习webpack5的模块联邦

模块联邦
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这个文件，引入后，在对组件动态引入的过程中会连接到和远程项目的共享容器，获取到可引入的模块