模块联邦的作用

模块联邦可以将不同webpack5项目之间的模块暴露出来。

比如有一个主应用vue3，一个微应用vue2，主应用可以使用微应用的模块。

webpack配置代码如下

// 微应用
entry: {
       // 一定要配置这个,并且名字必须跟微任务文件名字一样root_app
      root_app: './src/main.js',
    },
    plugins: [
      new ModuleFederationPlugin({
        name: 'root_app',
        filename: 'root_app.js',
        exposes: {
          './main': './src/main.js',
        },
      }),
    ],
    // 一定要配置这个！！！
    optimization: {
      splitChunks: false,
    },

// 主应用
new ModuleFederationPlugin({
        主应用名字
        name: 'vue_app',
        // 暴露给其他主应用的文件名
        filename: 'vue_app.js',
        // 引入其他微应用
        remotes: {
          // 微应用别名: '微应用名字@微应用host/微应用暴露的文件名'
          rootApp: 'root_app@http://localhost:3000/root_app.js',
        },
}),

在src建立bootstrap.js文件

将原本main.js的内容全部移到bootstrap.js，并在main.jsimport('./bootstrap.js')

在主应用使用

import main from 'rootApp/main'
export default {
  created() {
    console.log('helle moduleFederation', main)
  },
}

模块联邦的缺点

缺点还蛮多的，以下让我举几个大罪

• 虽然可以实现微前端无论技术栈传递模块，但是不同技术栈传递的模块，这种模块是无法通用的，需要通过某种手段去转换成本技术栈可使用的模块才可以。
• 一些不知道是我配置的问题还是什么问题，当我在微应用再配置一个暴露模块，主应用无法使用并报错Refused to execute script from 'http://localhost:3001/js/src_index_js.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. root_app.js:1145 Uncaught (in promise) ChunkLoadError: Loading chunk src_index_js failed. (error: http://localhost:3001/js/src_index_js.js) while loading "./index" from webpack/container/reference/rootApp