webpack5 Module Federation 配置项

Module Federation

webpack 模块联邦 是webapck 5 提供的一个能力；下面只给出具体的配置；

环境：

• node v16.18.0
• npm 8.19.2
• vue-cli 5.0.8 (vueCli 5.x 才支持 webpack 5.x)

项目创建

• vue create app (app2) (选择最基本的配置即可)
• 微调结构

// bootstrap.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App)
}).$mount('#app')


// main.js
import('./bootstrap');  // 便于shared  共用依赖  （官方指导）

• 启动服务，查看 http://localhost:4000/ 即可

• 以下放出具体配置

app

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
module.exports = defineConfig({
    transpileDependencies: true,
    publicPath: 'http://localhost:4000/',
    devServer: {
        port: 4000,
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
            "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
        }
    },
    chainWebpack: config => {
        // https://github.com/vuejs/vue-cli/issues/6318
        config.optimization.delete('splitChunks');

        config
        .plugin('module-federation-plugin')
        .use(ModuleFederationPlugin,[
            {
                name: 'app1',  // 当前APP作为remote暴露组件时的APP的名字
                // library: 'app1remote', // 当前APP作为remote暴露组件时的library名字
                filename: 'remoteApp1Entry.js',
                // 所有被暴露的组件会打包到这个文件中，同理使用者也需要从这里引入
                remotes: {
                    // app2: "app2_remote",  
                    app2: "app2@http://localhost:5000/remoteApp2Entry.js",
                    // app_three: "app_three_remote"  
                }, // 定义该库作为host时可能要引用的remote
                // exposes: {
                //  'AppContainer': './src/App',
                //  'HelloContainer': './src/components/HelloWorld'
                // }, // 定义该库作为remote时，要暴露出去的组件。左边是相对路径和组件名字（其他库使用时候），右边是该组件在本库内的路径
                shared: require('./package.json').dependencies,
            }
        ]
        )
    }
})

// App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <App2HelloContainer msg="Vue.js App2  test"/>
    <!-- <App2Com /> -->
    <AppContainer />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import AppContainer from 'app2/AppContainer';

const App2HelloContainer = () => import('app2/HelloContainer');
console.log('App2Com', App2HelloContainer); // yunt.Su

export default {
  name: 'App',
  components: {
    HelloWorld,
    // App2Com
    App2HelloContainer,
    AppContainer
  }
}
</script>

app2

// vue.config.js

const { defineConfig } = require('@vue/cli-service');
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
module.exports = defineConfig({
    transpileDependencies: true,

    publicPath: "http://localhost:5000/",
    devServer: {
        hot: true,
        port: 5000,
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
            "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
        }
    },
    configureWebpack: {
        plugins: [
            new ModuleFederationPlugin({
                name: 'app2',  // 当前APP作为remote暴露组件时的APP的名字
                library: {
                    type: 'var',
                    name: 'app2'
                }, // 当前APP作为remote暴露组件时的library名字
                filename: 'remoteApp2Entry.js',
                // 所有被暴露的组件会打包到这个文件中，同理使用者也需要从这里引入
                remotes: {
                    // app_two: "app_two_remote",  
                    // app_three: "app_three_remote"  
                }, // 定义该库作为host时可能要引用的remote
                exposes: {
                    './AppContainer': './src/App.vue',
                    './HelloContainer': './src/components/HelloWorld.vue'
                }, // 定义该库作为remote时，要暴露出去的组件。左边是相对路径和组件名字（其他库使用时候），右边是该组件在本库内的路径
                // shared: ["react", "react-dom","react-router-dom"]// 和引入的组件公用的dependency
                shared: require('./package.json').dependencies
            })
        ]
    },
    chainWebpack: config => {
        // https://github.com/vuejs/vue-cli/issues/6318
        config.optimization.delete('splitChunks');
    }
})