webpack5模块联邦（Module Federation）使用教程，在vue2中使用

博客示例demo已经上传gitee
Module Federation 可以实现微前端的效果，只是它是模块级的。即一个应用可以引入另外一个应用的模块。例如在a域名下启动的应用里，可以直接引用b域名应用里的资源。也就是说a应用可以异步获取b应用的组件进行使用。

这样就可以将应用分为更小的应用块，头部导航栏、侧边栏、业务逻辑组件都可以分到不同的应用块里开发，同时应用块间间可共享，互相依赖，可实时获取其它应用块构建好的bundle资源。

在入门前，先对一些概念达成共识：

在Module Federation中，每个应用都是一个独立的构建（webpack工程），称为容器。引用远程模块的应用叫作host，被引用模块所在的应用称为remote。

用到的插件：html-webpack-plugin、vue-loader、vue-template-compiler（需要和vue版本一致）、vue-style-loader、css-loader、webpack、webpack-cli、webpack-dev-server
启动webpack服务可使用：npx webpack serve --open

基础使用

一、配置remote应用，模块联邦插件会根据配置打包出对应的资源。

如下配置会构建向外暴露的三个组件对应的bundle，并暴露给其它应用。如果remote应用自身的入口文件里引用了这三个组件，会按本地依赖关系进行打包，不会与模块联邦共享。也就是说这三个组件会被打包两次，一次是根据模块联邦的配置，另一次是根据自身依赖关系。

remote应用只要在注册ModuleFederationPlugin插件时，定义三个参数

• name（向外暴露容器名称）
• filename（连接本容器的入口文件,包含暴露出去组件的及它们的依赖信息）
• exposes：向外暴露的组件

// remote应用的webpack.config.js配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
   
    VueLoaderPlugin } = require('vue-loader');
// webpack5中配置模块联邦的插件
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
   
   
    mode: 'development',
    entry: './src/index.js',
    output: {
   
   
        clean: true,
        // publicPath: 'http://localhost:3001/' 
    },
    devServer: {
   
   
        port: '3001'
    },
    plugins: [
        new HtmlWebpackPlugin({
   
   
            template: './index.html'
        }),
        new VueLoaderPlugin(), // 处理vue文件
        new ModuleFederationPlugin({
   
   
            name: 'remote_app', // 向外暴露容器名称
            filename: 'remote_index.js', // 连接本容器的入口文件,包含暴露出去组件的及它们的依赖信息
            exposes: {
   
   
                // 这里暴露了三个vue组件
                // 它们依赖vue、lodash、本地其它组件
                // 格式：{remote组件访问路径} ：{本地文件路径}
                './MyTable': './src/com/myTable.vue',
                './MyTopBar': './src/com/top-bar.vue',
                './MyText': './src/com/text.vue'
            },</