1.微前端實踐

https://www.jianshu.com/p/41ab812df9e7

1.portal 工程--- 入口工程

2.業務工程--子工程

3.特殊業務工程--layout

4.common工程--提取公共

import Vue from 'vue'; // 公共依賴
import VueRouter from 'vue-router';
import VueI18n from 'vue-i18n';
import '@/css/icon-font/iconfont.css';
import ContentSelector from '@/components/ContentSelector'; // 公共元件

Vue.use(VueI18n); // 大家都要這麼做，我們就代勞吧！
我們把這些公共依賴、公共元件、CSS、Fonts 等都放到一個工程裡，由該工程進行打包，將依賴、元件 export，並以 UMD 的方式注入到全域性。
module.exports = {
    'vue': Vue,
    'vue-router': VueRouter,
    'content-selector': ContentSelector,
};

-------
webpack 
output: {
    libraryTarget: "umd",
    library: 'mfe:common'
}
-----子工程
var externalModules = ['vue', 'vue-router', 'content-selector'];

module.exports = { // webpack 配置項
    // ...
    externals: (context, request, callback)=>{
        if(externalModules.includes(request)){
            callback(null, 'root window["mfe:common"]["'+request+'"]')
        } else {
            callback();
        }
    },
}