Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

First of all, we can learn about the idea of module federation technology of Webpackage 5. In the current development, the idea and technology of micro front end have been relatively widely used.

Detailed concept of webpack5

We simulated two teams, with Team APP1 developing components deployed online for use by team App2, and Team App2 using remote components.

For detailed code, please refer to the following code:

Local end (Team APP1):

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
    devtool: false.entry: './src/main.js'.mode: "development".devServer: {
      port: 3000.contentBase: path.join(__dirname, "dist"),},module: {
        rules: [{test: /\.js$/,
                loader: 'babel-loader'.exclude: /node_modules/
            },
          {
            test: /\.vue$/,
            loader: 'vue-loader'}},plugins: [
        // Be sure to introduce this plugin!
        new VueLoaderPlugin(),
        new HTMLWebpackPlugin({
            template: path.resolve(__dirname, './public/index.html')}),// name string Mandatory value, that is, the output module name, when the remote reference path is ${name}/${expose}
		// The library object declares a global variable. Name is the umD's name
		// filename string specifies the filename to build the output
		// Remotes Object Mapping of the remote reference application name and its aliases, using the key value as the name
		// Object An object path and its aliases that can be exposed when a remote reference is made
		// Shared objects are third-party dependencies that can be shared with other applications, so that your code does not have to load the same dependency twice
        new ModuleFederationPlugin({
            // Provide files for other services to load
            filename: "remoteEntry.js".// A unique ID that identifies the current service
            name: "app1".library: { type: "var".name: "app1" },
            // The module that needs to be exposed is introduced with '${name}/${expose}' when used
            exposes: {
                './Header': "./src/components/Header.vue",}})]}Copy the code

Remote end (Team APP2):

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
    devtool: false.entry: './src/main.js'.mode: "development".devServer: {
      port: 3001.contentBase: path.join(__dirname, "dist"),},module: {
        rules: [{test: /\.js$/,
                loader: 'babel-loader'.exclude: /node_modules/
            },
          {
            test: /\.vue$/,
            loader: 'vue-loader'}},plugins: [
        // Be sure to introduce this plugin!
        new VueLoaderPlugin(),
        new HTMLWebpackPlugin({
            template: path.resolve(__dirname, './public/index.html')}),new ModuleFederationPlugin({
          name: "app2".remotes: {
          // Name of file app1 filename
            app1: "app1@http://localhost:3000/remoteEntry.js",}})]}Copy the code

At this time there is a very important knowledge point is in app2 to use app1 exposed components, the need to use asynchronous loading, can refer to the following implementation:

<template>
  <div>
    <Header name="app2" />
  </div>
</template>

<script>
export default {
  components: {
    // Header: () => import("app1/Header"),
    Header(resolve) {
      require(["app1/Header"], resolve); }}};</script>

<style lang="scss" scoped></style>

Copy the code

Here the project can complete the implementation of module federation technology, in principle, it can use Webpack5 + VUe3 + TS to rebuild a set of baseline projects.

If you still have problems, you can refer directly to the following project code:

Detailed project demo can refer to the following demo:

Download the demo and start both projects with NPM Run Start

Webpack5 module federated project code download address portal