background
Module Federation allows the generation of modules that are provided or used at runtime with other independent generation
The purpose of this series of articles is to resolve the confusion that many users may have with module federation using EMP OR webpack5
Course Chapter Planning
- ModuleFederationPluginOptions configuration
- Shared configuration
- Configuration description and impact
- How the scope is set
- Multi-version sharing mode
React
- The remotes configuration combines with the ESM
- Impact of configuration and description
- The impact of the remote reference pattern on consumers
- Example of SSR sharing
- Remotes interacts with the Library
ModuleFederationPluginOptions configuration
name? :
The base station name
- type
string
filename? :
Base station file name, directory path relative to output.path
- type
string
library? :
The base-station library sharing configuration is described in a separate section
- type
LibraryOptions
remotes? :
Base station locations and request ranges for modules are resolved and loaded at run time. When provided, the attribute name is used as the request scope, otherwise the request scope is automatically inferred from the base station location.
- Type:
(string | RemotesObject)[] | RemotesObject
remoteType? :
The external type of the remote base station, and how it is referenced
"var"| "module"| "assign"| "this"| "window"| "self"| "global"| "commonjs"| "commonjs2"| "commonjs-module"| "commonjs-static"| "amd"| "amd-require"| "umd"| "umd2"| "jsonp"| "system"| "promise"| "import"| "script"| "node-commonjs";
Copy the code
expose? :
This base station is exposed to modules. When provided, the property name is used as the public name, otherwise the public name is automatically inferred from the request.
- type
(string | ExposesObject)[] | ExposesObject
shared? :
Modules that should be shared in the shared scope. If an attribute name is provided, the attribute name will be used to match the module requested in this compilation. Expand the individual chapters
- type
(string | SharedObject)[] | SharedObject
shareScope? :
Share scope name used for all share modules (default). Will unfold in a separate section with Shared
- type
string
runtime? :
The name of the runtime block. If a runtime block with this name has been created, or an existing entry point is used as a runtime.
- type
string | false
use
The most traditional usage of EMP V2 is as follows:
module.exports={
empShare: {
name: 'microApp'.// Application name, base station name
// With this configuration, name is exposed globally as var
remotes: {
'@microHost': `microHost@http://localhost:8001/emp.js`.// Remote address
},
// Other exposures can be set through the Library
library: {type: 'module'} Note that remotes are set up to be adjusted accordingly
exposes: {
'./App': './src/App',},// Implement only one Module Feration and shareLib
shared: {
react: {requiredVersion: '^ 17.0.1'},
'react-dom': {requiredVersion: '^ 17.0.1'}},}Copy the code
conclusion
At present, in the process of team landing, it has changed from sharing of module federation into a development model of micro module. And sink into the mega-project attempt, from the benefits and skills of the unimaginable!