Module Federation of webpack4
support universal-module-federation-plugin
Try online:
config examples:
// webpack.config.js
const MF = require("mf-webpack4")
module.exports = {
plugins: [
new MF({
remotes: {
"app2": "app2@http://localhost:9002/remoteEntry.js"
},
name: "app1",
filename: "remoteEntry.js",
shared: {
"react": {
singleton: true,
requiredVersion: "16",
strictVersion: true
},
"react-dom": {
singleton: false,
}
},
exposes: {
"./App": "./src/App"
}
})
]
}
dynamic-remotes examples
use module-federation-runtime instead of webpack internal variables and dynamic loading API
// 1. __webpack_init_sharing__
await require("module-federation-runtime").initSharing("default")
// 2. __webpack_share_scopes__
require("module-federation-runtime").shareScopes
// 3. dynamic-remotes
await require("module-federation-runtime").registerRemotes({
"mfapp01": {
url: "https://cdn.jsdelivr.net/npm/mf-app-01/dist/remoteEntry.js"
},
})
const AppFactory = await findModule("mfapp01", "./App")
AppFactory()
Options
shared
https://webpack.js.org/plugins/module-federation-plugin/
1. shared: ["react"]
2. shared: {react: "17.0.2"}
3. shared: {react: {"import", eager, requiredVersion, shareScope, singleton, version}}
remotes
remotes: {
"app2": "app2@http://localhost:9002/remoteEntry.js",
"promiseRemote": `promise new Promise(resolve => resolve({
init() {},
get() {
return function () {
return {
promiseRemote: "aaaa"
}
}
}
}))`
}
name
library required name
filename
default "remoteEntry.js"
exposes
exposes: {
"./App": "./src/App"
}
matters needing attention
vue-cli matters needing attention
// vue.config.js
const MF = require("mf-webpack4")
module.exports = {
// TODO: 1. parallel = false
// It is suspected that there is a bug in the cooperation between "webpack-virtual-modules" and "thread-loader", and an error will be reported during the packaging stage
parallel: false,
chainWebpack(chain) {
// TODO: 2. clear splitChunks
// The splitChunks strategy of vue-cli needs to be used in conjunction with index.html, and main.js, chunks.js... are loaded at the entry. The entry of MF has only one file remoteEntry.js, the policy conflicts and needs to be reset
chain.optimization.splitChunks().clear()
chain.plugin("moduleFederation")
.use(MF, [{
name: "vueCliRemote",
shared: ["vue"],
exposes: {
"./App": "src/App.vue"
}
}])
},
}
Differences with webpack5
module-federation/webpack-4 The plugin has implemented the main capabilities of module-federation, and can be found in webpack4 and webpack5 refer to each other , The following describes which parameters are not supported by the plugin
unsupported parameter
options.library
The priority of this parameter is not very high, see for details "https://github.com/webpack/webpack/issues/16236" , Therefore, the implementation in webpack4 is similar to setting library.type = "global"