concept

Module Federation: Module Federation

  • The motivation for Module Federation is for different development groups to develop one or more applications together
  • The application will be divided into smaller application blocks, an application block, which can be a front-end component such as header navigation, or a sidebar, or a logical component for data retrieval logic
  • Each application block is developed by a different group
  • An application or application block shares another application block or library

composition

The container

  • With Module Federation, each application block is a separate build that compiles into a container
  • Containers can be applied by other applications or by other containers

remote

  • A referenced container is called remote, which exposes the module to host

host

  • The reference is host, using the module exposed by the remote module

The diagram

Modules can depend on each other

practice

Initialize the

  • File structure

  • Both are initialized
npm init -y
yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react style-loader css-loader --save-dev
yarn add react react-dom --save
Copy the code

The script command

  • Package. json(host and remote configuration same)
 "scripts": {
    "build": "webpack",
    "start": "webpack serve"
  },
Copy the code

Difference between script command and webpack4 :” start”:”webpack-dev-server”

webpack.config

  • Require built-in plugin: ModuleFederationPlugin
  • Instantiate: New ModuleFederationPlugin
  • Configuring the Export Module
    1. Name: indicates the output module name. The remote reference path is${name}/${expose}
    2. Filename: specifies the name of the file to build the outputThis is separate from the project's own output main.js, which is packaged for use by others, and the final package for its own standalone build
    3. Remotes: mapping of the name of the remote referenced application and its alias. This is used with the key value as name, where remote points to the module name output by the remote referenced
    4. Shared: Third-party dependencies that can be shared with other applications, reducing the need to repeatedly load the same common dependency in codeThe import dependency of the module in remote, the public dependency when referenced, and the last reference to the host dependency
    5. An object path and aliases that can be exposed when a remote reference is made
  • The core code

Remote (webpack. Config. Js)

devServer: { port: 3000, }, plugins: [ new ModuleFederationPlugin({ filename: "remoteEntry.js", name: "Remote ",// name string exposes: {"./NewList": "./ SRC /NewList",// Public module to be exposed}, shared: {react: {singleton: true }, "react-dom": { singleton: true, }, }, }), ],Copy the code

Remote NewList components

Import React from 'React' export default ()=>{return <div> news list </div>}Copy the code

The host (webpack. Config. Js)

Import the module we want to reference

 plugins: [
    new ModuleFederationPlugin({
      remotes: {
        remote: "remote@http://localhost:3000/remoteEntry.js", 
      },
    }),
  ],
Copy the code

The host (App. Js)

import React from "react"; const RemoteNewList = React.lazy(() => import("remote/NewList")); Const App = () => {return (<div> <h2> local component Slider</h2> < girl /> {/* Suspense for a loading*/} < react.girl Fallback ={<div> loading in.... </div>}> <RemoteNewList /> </React.Suspense> </div> ); }; export default App;Copy the code

Test results:

  • Successfully rendered the NewList component in the Remote project

Implement bidirectional dependencies

Remote can also be a reference as host

The host (webpack. Config. Js)

plugins: [ new HtmlWebpackPlugin({ template: "./public/index.html", }), new ModuleFederationPlugin({ filename: "remoteEntry.js", name: "host", remotes: { remote: "remote@http://localhost:3000/remoteEntry.js", }, exposes: {"./Slider": "./ SRC /Slider",}, shared: {react: {singleton: true}, "react-dom": {// repeat the same module dependency singleton: true, }, }, }), ],Copy the code

Remote (App. Js)

import React from "react"; import Slider from "./Slider"; const RemoteNewList = React.lazy(() => import("remote/NewList")); Const App = () => {return (<div> <h2> local component Slider</h2> < girl /> {/* Suspense for a loading*/} < react.girl Fallback ={<div> loading in.... </div>}> <RemoteNewList /> </React.Suspense> </div> ); }; export default App;Copy the code

The test results

Finally, the code word is not easy. If you find this article helpful, please remember to like three lianoh. Thank you very much