一文大白话讲清楚webpack进阶——9——ModuleFederation实战

文章目录

一文大白话讲清楚webpack进阶------9------ModuleFederation实战

1. 啥是ModuleFederation

2. 创建容器应用

  • 创建项目并初始化,
  • 安装webpack和webpack-cli
  • 配置webpack.config.js
js 复制代码
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const path = require("path");
 
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    publicPath: 'auto',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "sharedLib",
      filename: "remoteEntry.js",
      exposes: {
        './MyComponent': './src/MyComponent.js',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^17.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^17.0.0' }
      }
    }),
  ],
};

3. 创建远程应用

  • 创建项目并初始化,
  • 安装webpack和webpack-cli
  • 配置webpack.config.js
js 复制代码
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const path = require("path");
 
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    publicPath: 'auto',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "app",
      remotes: {
        sharedLib: "sharedLib@http://localhost:3000/remoteEntry.js",
      },
      shared: {
        react: { singleton: true, requiredVersion: '^17.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^17.0.0' }
      }
    }),
  ],
};

4. 启动远程应用

  • 启动远程应用

5. 使用远程应用的组件

  • 在容器应用中的入口文件引用组件
js 复制代码
import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from 'sharedLib/MyComponent'; // 从远程库中导入组件
import App from './App'; // 本地组件或其他逻辑
 
ReactDOM.render(<React.StrictMode><App /><MyComponent /></React.StrictMode>, document.getElementById('root'));
相关推荐
Hello.Reader21 分钟前
Rust → WebAssembly 的性能剖析全指南
前端·rust·wasm
前端小巷子25 分钟前
Vue 2 Diff 算法
前端·vue.js·面试
奕辰杰4 小时前
关于npm前端项目编译时栈溢出 Maximum call stack size exceeded的处理方案
前端·npm·node.js
JiaLin_Denny6 小时前
如何在NPM上发布自己的React组件(包)
前端·react.js·npm·npm包·npm发布组件·npm发布包
路光.7 小时前
触发事件,按钮loading状态,封装hooks
前端·typescript·vue3hooks
我爱996!7 小时前
SpringMVC——响应
java·服务器·前端
咔咔一顿操作8 小时前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
kk爱闹8 小时前
用el-table实现的可编辑的动态表格组件
前端·vue.js
漂流瓶jz9 小时前
JavaScript语法树简介:AST/CST/词法/语法分析/ESTree/生成工具
前端·javascript·编译原理
换日线°9 小时前
css 不错的按钮动画
前端·css·微信小程序