前提概述
模組聯邦可以將多個獨立執行的專案產生依賴關係，以下建立兩個專案，讓a專案依賴b專案的乙個元件。(前三步兩個專案配置相同)
(1)、安裝webpack環境
npm init -y
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -d
在根目錄下建立 /src/index.js
(3)、配置webpack
在根目錄下建立webpack.config.js
// webpack.config.js
const htmlwebpackplugin = require('html-webpack-plugin')
module.exports =
在package.json中配置啟動指令碼：
"scripts": ,export default () =>const htmlwebpackplugin = require('html-webpack-plugin')
const = require('webpack').container
module.exports = , // 該專案需要遠端依賴的配置
exposes: ,
shared: {} // 改專案分享的公共模組
})]}
npm run dev在package.json中配置啟動指令碼：
"scripts": ,const htmlwebpackplugin = require('html-webpack-plugin')
const = require('webpack').container
module.exports = ,
exposes: {},
shared: {}
})]}
;(async () => = await import('header/createheader')
})()
npm run dev以下建立兩個react專案，讓a專案依賴b專案的乙個元件。(第一步兩個專案配置相同)
(1)、使用react腳手架搭建兩個react專案
以a專案為例
cd a
// 拉取配置檔案
npm run eject
(2)、準備b專案資源
在scr/components下建立乙個元件button.jsx
const button = () =>
)}export default button
// const default_port = parseint(process.env.port, 10) || 3000;
const default_port = parseint(process.env.port, 10) || 3001;
...
const = require('webpack').container;
...plugins: [
...output:
...new modulefederationplugin(,
exposes: ,
}),....
]
npm start修改config/webpack.config.js檔案 加入模組聯邦外掛程式，配置好依賴
...
const = require('webpack').container;
...plugins: [
...new modulefederationplugin(,
exposes: {},
shared: {}
})，....
]
import react, from 'react'
const button = react.lazy(() => import('component/button'))
return (
);}
npm run start聯邦學習 聯邦學習
文章內容主要來自文末網盤內部分資料 最近微眾舉辦了乙個面向高校大學生的ai比賽，題目如下 基於微眾提出的聯邦學習模型，設計一款有應用場景的產品。資料來源之間存在著難以打破的壁壘，一般情況下人工智慧的所需要的資料會涉及多 個領域，例如在基於人工智慧的產品推薦服務中，產品銷售方擁有產品的資料 使用者購買...
git管理 webpack模組打包
git管理 webpack模組打包 git管理 git和svn區別 1.svn 集中式版本控制系統,版本庫是集中存放在 伺服器的，而幹活的時候，用的都是自己的電腦，所以要先從 伺服器取得最新的版本，然後開始幹活，幹完活了，再把自己的活推送給 伺服器。2.git 分布式版本控制系統根本沒有 伺服器 每...
webpack 概念9 模組熱替換
讓我們從不同角度出發 1 在應用程式中 除了普通資環，編譯器 compiler 需要發出update，允許更新之前的版本到新的版本，update由2部分構成 1 更新後的manifest json 2 乙個或者多個更新後的chunk js manifest包括新的編譯hash和所有的待更新chunk...