Webpack5 new feature Module Federation usage

The role of Module Federation, a new feature of Webpack5 , is:

Make modules of different projects available to other projects through remote use , and this function is in a calledModuleFederationPluginImplemented in plugin

ModuleFederationPlugin plugin

Module Federation modules share the whole throughModuleFederationPluginThis plugin is connected in series.

Remote: Provide module sharing services
Host: Get shared modules

The schematic diagram is as follows:
insert image description here

Remote configuration:

//webpack.config.js 
const ModuleFederationPlugin =  require ( 'webpack/lib/container/ModuleFederationPlugin' )

module . exports =  { 
  ... 
   devServer :  { 
    port :  8080 
  } , 
  plugins :  [ 
    new  ModuleFederationPlugin ( { 
       name : 'remoteVar' ,  //required, unique ID, as the output module name, use ${name} /${expose}; 
       filename : 'remoteEntry.js' ,  // The constructed file name 
       exposes : {  //Optional, indicating which attributes of the export are consumed as Remote; 
           './NewsList' : ' ./src/NewsList' 
       } , 
       shared :[ 'react' , 'react-dom' ]  //Optional, use Host's dependencies first, if Host doesn't have it, then use your own; 
    } ) 
  ] 
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

Host configuration:

//webpack.config.js 
const ModuleFederationPlugin =  require ( 'webpack/lib/container/ModuleFederationPlugin' )

module . exports =  { 
  ... 
  devServer :  { 
    port :  8081 
  } , 
  plugins :  [ 
    new  ModuleFederationPlugin ( { 
       remotes : {  //Optional, indicating which Remotes to consume as Host; 
           remote : '[email protected]:// localhost:8080/remoteEntry.js' 
           hostRemote : '[email protected]://localhost:8082/remoteEntry.js' 
       } , 
       shared : [ 'react' , 'react-dom' ]     
    }) 
  ] 
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

Consume imported remote remote:

let RemoteNewList =  await  import ( 'remote/NewsList' ) ; 
let RemoteNewList =  await  import ( 'hostRemote/Slides' ) ;
  • 1
  • 2

Host/Remote configuration:

//webpack.config.js 
const ModuleFederationPlugin =  require ( 'webpack/lib/container/ModuleFederationPlugin' )

module . exports =  { 
  ... 
  devServer :  { 
    port :  8082 
  } , 
  plugins :  [ 
    new  ModuleFederationPlugin ( { 
       name : 'hostRemoteVar' , 
       filename : 'remoteEntry.js' ,  // the constructed file name 
       remotes : {   // available Selected to indicate which Remotes to consume when used as Host; 
           remote : '[email protected]://localhost:8080/remoteEntry.js' , 
        } , 
        exposes : { //Optional, indicating which attributes are consumed when exported as Remote; 
		   './Slides' : './src/Slides' 
        } , 
        shared : [ 'react' , 'react-dom' ]     
    } ) 
  ] 
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

Consume imported remote remote:

let RemoteNewList =  await  import ( 'remote/NewsList' ) ;
  • 1

Learn more about Module Federation

Related: Webpack5 new feature Module Federation usage