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 modeReact
  • 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

  • typestring

filename? :

Base station file name, directory path relative to output.path

  • typestring

library? :

The base-station library sharing configuration is described in a separate section

  • typeLibraryOptions

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

  • typestring

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.

  • typestring | 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!