universal-module-federation-plugin
This is currently version 2.0 documentation, v1 is here
Keep the original API of module-federation, support the integration of various module specifications
Allows you to control all the processes of each dependency by yourself
try online
- mf + umd
-
web worker（Using module-federation in worker threads）
- Both plugins can set workerFiles to specify worker files or directories to use module-federation in worker threads
-
// webpack.config.js new UmdPlugin({ workerFiles: [/\.?worker\.js$/] }) new UniversalModuleFederationPlugin({ workerFiles: [/\.?worker\.js$/] })
Table of contents
- umd federation
- UniversalModuleFederation
UmdPlugin examles
Allow module-federation to use umd module, umd dependencies can be obtained from shareScopes or remotes
// webpack.config.js
const {UmdPlugin} = require("universal-module-federation-plugin")
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'app3',
filename: 'remoteEntry.js',
remotes: {
app2: "app2@http://localhost:9002/remoteEntry.js",
},
exposes: {
'./App': './src/App',
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
}),
new UmdPlugin({
// The matched remotes are loaded in umd mode
remotes: {
"react-router": "https://unpkg.com/react-router@6.4.3/dist/umd/react-router.production.min.js",
"@remix-run/router": "https://unpkg.com/@remix-run/router@1.0.3/dist/router.umd.min.js"
}
}),
new UmdPlugin({
// ...
// Can be used multiple times
})
]
}UmdPlugin API
| options | desc | interface | default | examles |
|---|---|---|---|---|
| remotes | umd remotes | { remoteKey: "{global}@{url}" } | {} | string> |
| workerFiles | web worker file path | [] | [/.?worker.js$/] |
delegate modules
Reference from delegate-modulesnot the official warehouse
// webpack.config.js
const {DelegateModulesPlugin} = require("universal-module-federation-plugin")
module.exports = {
plugins: [
new ModuleFederationPlugin({
shared: { react: { singleton: true } },
}),
new DelegateModulesPlugin({
remotes: {
test1: "internal ./src/remote-delegate.js?remote=test1@http://localhost:9000/remoteEntry.js"
}
})
]
}// src/remote-delegate.js
module.exports = new Promise((resolve, reject) => {
const currentRequest = new URL(__resourceQuery, __webpack_base_uri__).searchParams.get("remote");
const [global, url] = currentRequest.split('@');
const __webpack_error__ = new Error()
__webpack_require__.l(
url,
function (event) {
if (typeof window[global] !== 'undefined') return resolve(window[global]);
var realSrc = event && event.target && event.target.src;
__webpack_error__.message = 'Loading script failed.\\n(' + event.message + ': ' + realSrc + ')';
__webpack_error__.name = 'ScriptExternalLoadError';
__webpack_error__.stack = event.stack;
reject(__webpack_error__);
},
global,
);
})UniversalModuleFederationPlugin examles
If you have your own module specification, you can use UniversalModuleFederationPlugin to integrate it.
UniversalModuleFederationPlugin Exposes some hooks to customize the loading behavior of remote control
// webpack.config.js
const {UniversalModuleFederationPlugin} = require("universal-module-federation-plugin")
plugins: [
new UniversalModuleFederationPlugin({
remotes: {
app1: function (){
return Promise.resolve({
init() {},
async get(modulePath) {
return function () {
return ({"./App1": "./App1", "./App2": "./App2"})[modulePath]
}
}
})
}
},
})
]// main.js
import App1 from "app1/App1"
import App2 from "app1/App2"
console.log(App1, App2)