When the project was upgraded yesterday, we upgraded a version of Webpack. It’s embarrassing for me, you know, so I won’t say anything. Well, give me a break. It’s finally done.

When I combed through the project, I actually used the new version of Webpack’s module federation to implement application-to-application references. A prototype of a micro front end appeared!

Take this opportunity to introduce the micro front end implementation process of Webpack.

Create two applications

Since this is an application to application reference, we will create two projects, one called APP and one called Slide.

The configuration file webpack.config.js for the app project contains the following contents:

//app/webpack.config.js const path = require("path") const HtmlWebpackPlugin = require("html-webpack-plugin") // Micro front module const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin; module.exports = { mode:"development", devtool:false, entry:"./src/index.js", output:{ filename:"build.js", path: path.resolve(__dirname,"dist") }, devServer:{ contentBase: path.join(__dirname, 'dist'), port:8081 }, module:{ rules:[ { test:/\.js$/, exclude:/node_modules/, use:{ loader:"babel-loader" } } ] }, plugins:[ new HtmlWebpackPlugin({ title:"webpack5", template:"./public/index.html" }), new ModuleFederationPlugin({ name:"remote", // library:{type:"var",name:"remote"}, Filename: "remoteEntry. Js", exposes: {/ / export ". / App ":". / SRC/App. Js "}}})]Copy the code

The Slide project configuration file webpack.config.js contains the following contents:

Const path = require("path") const HtmlWebpackPlugin = require("html-webpack-plugin") // Module federation const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin; module.exports = { mode:"development", devtool:false, entry:"./src/index.js", output:{ filename:"build.js", path: path.resolve(__dirname,"dist") }, devServer:{ contentBase: path.join(__dirname, 'dist'), port:3000 }, module:{ rules:[ { test:/\.js$/, exclude:/node_modules/, use:{ loader:"babel-loader" } } ] }, plugins:[ new HtmlWebpackPlugin({ title:"webpack5", template:"./public/index.html" }), new ModuleFederationPlugin({ name:"slide", library:{type:"var",name:"slide"}, Remotes: {" remote ":" remote @ http://127.0.0.1:8081/remoteEntry.js "}}})]Copy the code

Focus on

The field description of the options parameter is passed when the ModuleFederationPlugin is instantiated.

  • The name of module

  • The library currently sees {type: “var”} {type: “commonjs-module”}, which can be used to specify the usage specification of the module

  • Name of the module that remotes depends on

  • Exposes of modules, there can be multiple

  • When a shared app is packaged to expose a module, the shared app is not packaged as a shared dependency, such as React Vue, etc

Note: Library is an export specification, and the front end uses {type:”var”}. Do not add this field in the imported application, otherwise it will not display the content, but the imported module can add it.

There are also exposes and Remotes’ field friends to look out for.

  • Exposes the field of their exposes with./name

  • The remotes field should be the same as the name of the exposed module, and the aliases should be the same

Finally, if both apps are launched at the same time, you’ll find that the one you want is one item for a plump item (●’ extract ‘●) that imports one of the other apps’ modules.