首页 > 其他分享 >Webpack5 联邦模块

Webpack5 联邦模块

时间:2023-06-06 16:03:34浏览次数:42  
标签:Webpack5 ModuleFederationPlugin js webpack 模块 联邦 news now

模块联邦

在大型项目中,往往会把项目中的某个区域或功能模块作为单独的项目开发,最终形成「微前端」架构

在微前端架构中,不同的工程可能出现下面的场景

Webpack5 联邦模块_bootstrap

这涉及到很多非常棘手的问题:

  • 如何避免公共模块重复打包
  • 如何将某个项目中一部分模块分享出去,同时还要避免重复打包
  • 如何管理依赖的不同版本
  • 如何更新模块
  • ......

webpack5尝试着通过模块联邦来解决此类问题

示例

现有两个微前端工程,它们各自独立开发、测试、部署,但它们有一些相同的公共模块,并有一些自己的模块需要分享给其他工程使用,同时又要引入其他工程的模块。

Webpack5 联邦模块_jquery_02

初始化工程

home项目

安装

# 初始化 package.json
npm init -y 

# 安装依赖
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
npm i jquery

修改package.json

"scripts": {
   "build": "webpack",
   "dev": "webpack serve"
 }

配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    port: 8080,
  },
  output: {
    clean: true,
  },
  plugins: [ new HtmlWebpackPlugin() ]
};

代码

// src/now.js

import $ from 'jquery';

export default function (container) {
  const p = $('<p>').appendTo(container).text(new Date().toLocaleString());
  setInterval(function () {
    p.text(new Date().toLocaleString());
  }, 1000);
}

// src/bootstrap.js
import $ from 'jquery';
import now from './now';

// 生成首页标题
$('<h1>').text('首页').appendTo(document.body);

// 首页中有一个显示当前时间的区域
now($('<div>').appendTo(document.body));

// src/index.js
import('./bootstrap')
active项目

安装

# 初始化 package.json
npm init -y 

# 安装依赖
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
npm i jquery

修改package.json

"scripts": {
   "build": "webpack",
   "dev": "webpack serve"
 }

配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    port: 3000,
  },
  output: {
    clean: true,
  },
  plugins: [ new HtmlWebpackPlugin() ]
};

代码

// src/news.js

import $ from 'jquery';

export default function (container) {
  const ul = $('<ul>').appendTo(container);
  let html = '';
  for (var i = 1; i <= 20; i++) {
    html += `<li>新闻${i}</li>`;
  }
  ul.html(html);
}


// src/bootstrap.js
import $ from 'jquery';
import news from './news';

// 生成活动页标题
$('<h1>').text('活动页').appendTo(document.body);

// 活动页中有一个新闻列表
news($('<div>').appendTo(document.body));

// src/index.js
import('./bootstrap')

暴露和引用模块

active项目需要使用home项目的now模块

home项目暴露now模块

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // 模块联邦的名称
      // 该名称将成为一个全部变量,通过该变量将可获取当前联邦的所有暴露模块
      name: 'home',
      // 模块联邦生成的文件名,全部变量将置入到该文件中
      filename: 'home-entry.js',
      // 模块联邦暴露的所有模块
      exposes: {
        // key:相对于模块联邦的路径
        // 这里的 ./now 将决定该模块的访问路径为 home/now
        // value: 模块的具体路径
        './now': './src/now.js',
      },
    }),
  ],
};

active项目引入now模块

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // 远程使用其他项目暴露的模块
      remotes: {
        // key: 自定义远程暴露的联邦名
        // 比如为 abc, 则之后引用该联邦的模块则使用 import "abc/模块名"
        // value: 模块联邦名@模块联邦访问地址
        // 远程访问时,将从下面的地址加载
        home: 'home@http://localhost:8080/home-entry.js',
      },
    }),
  ],
};

// src/bootstrap.js
// 远程引入时间模块
import now from 'home/now'
now($('<div>').appendTo(document.body));
home项目需要使用active项目的news模块

active项目暴露news模块

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // 模块联邦的名称
      // 该名称将成为一个全部变量,通过该变量将可获取当前联邦的所有暴露模块
      name: 'active',
      // 模块联邦生成的文件名,全部变量将置入到该文件中
      filename: 'active-entry.js',
      // 模块联邦暴露的所有模块
      exposes: {
        // key:相对于模块联邦的路径
        // 这里的 ./news 将决定该模块的访问路径为 active/news
        // value: 模块的具体路径
        './news': './src/news.js',
      },
    }),
  ],
};

home项目引入news模块

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // 远程使用其他项目暴露的模块
      remotes: {
        // key: 自定义远程暴露的联邦名
        // 比如为 abc, 则之后引用该联邦的模块则使用 import "abc/模块名"
        // value: 模块联邦名@模块联邦访问地址
        // 远程访问时,将从下面的地址加载
        active: 'active@http://localhost:3000/active-entry.js',
      }
    }),
  ],
};

// src/bootstrap.js
// 远程引入新闻模块
import news from 'active/news'
news($('<div>').appendTo(document.body));

处理共享模块

两个项目均使用了jquery,为了避免重复,可以同时为双方使用shared配置共享模块

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // 配置共享模块
      shared: {
        // jquery为共享模块
        jquery: {
          singleton: true, // 全局唯一
        },
      },
    }),
  ],
};

标签:Webpack5,ModuleFederationPlugin,js,webpack,模块,联邦,news,now
From: https://blog.51cto.com/u_16098938/6425201

相关文章

  • 如何在Python中使用JSON模块
    JSON(JavaScriptObjectNotation)是一种流行的轻量级数据交换标准。它表示由键值对组成的数据结构,非常简单易懂。JSON已成为在线服务之间数据交换的行业标准。它广泛用于现代编程语言,包括Python。JSON数据经常表示为嵌套字典、列表和标量值,例如文本、数字、布尔值和空值。之所......
  • 28) 跳过去 (只装父pom |不测试|构建特定模块)
    只装父pom跳过子命令行mvn-Ninstall-N,--non-recursive          Donotrecurseintosub-projectsusage:mvn[options][<goal(s)>][<phase(s)>]eclipse 跳过测试mvninstall-DskipTests http://maven.apache.org/surefire/maven-su......
  • IKCM10H60GA-ASEMI代理英飞凌功率模块IKCM10H60GA
    编辑:llIKCM10H60GA-ASEMI代理英飞凌功率模块IKCM10H60GA型号:IKCM10H60GA品牌:ASEMI封装:DIP-24正向电流:0.8A反向电压:600V引脚数量:3芯片个数:1芯片尺寸:漏电流:>10ua恢复时间: 浪涌电流:30A包装方式:盘装封装尺寸:如图特性:单向可控硅工作结温:-40℃~125℃......
  • 单片机+WiFi模块和主流物联网平台实现MQTT协议通信视频教程
    单片机+WiFi模块和主流物联网平台实现MQTT协议通信视频教程1、单片机+WiFi模块和阿里云物联网平台实现MQTT协议通信视频教程单片机+WiFi模块和阿里云物联网平台实现MQTT协议通信,阿里云物联网平台可以对单片机数字量输出、保持寄存器进行设置操作,单片机可以实时上报数字量输入、数......
  • OverTheWire攻关过程-Bandit模块33
    我们打开lv32-lv33,查看信息机器翻译在所有这些git的东西之后,是时候再次逃脱了。祝你好运!您可能需要解决此级别的命令嘘,伙计看来是需要sh命令先了解下sh命令我们登陆服务器查看信息已进入就是shell尝试了几个,发现不行输入$0可以得到正常的shellcat/etc/bandit_pass/bandit33得到密......
  • idea添加maven模块
    pom.xml右键AddasMavenProject......
  • HONEYWELL工业模块SPS5713 51199930-100
    W;① ⑧ 0 ③ 0 ① 7  7  ⑦ 5 ⑨HONEYWELL工业模块SPS571351199930-100,05074-A-012205704-A-012105704-A-0131,05701-A-0361,05704-A-0146,05704-A-0145,05701-A-0361,05704-A-0144。SC-PCMX0151307195-175,05701-A-0550,一般信息产品编号:SYN5201-2277......
  • 精易模块类_json的使用方法
    一般解析{ "code":0, "whwswswws":"ej7ltErOLmBq00vH-Cg2EFw", "openall":1, "openalltouch":1, "processtype":1, "appidStatuscode":0}.版本2.支持库specJSON.解析(#INFO,,)调试输出(JSON.取属性对象......
  • BOSHIDA DC电源模块在工业自动化的应用
    三河博电科技BOSHIDADC电源模块在工业自动化的应用 随着自动化技术的不断发展,DC电源模块已成为工业控制系统中不可或缺的一个组成部分。在许多自动化系统中,如机器人、控制器、PLC等,都需要使用到直流电源模块来提供稳定可靠的电源,以确保系统的正常运行。本文将从以下几个方面......
  • DC电源模块在工业自动化的应用
    BOSHIDADC电源模块在工业自动化的应用随着自动化技术的不断发展,DC电源模块已成为工业控制系统中不可或缺的一个组成部分。在许多自动化系统中,如机器人、控制器、PLC等,都需要使用到直流电源模块来提供稳定可靠的电源,以确保系统的正常运行。本文将从以下几个方面探讨DC电源模块在工......