一文大白话讲清楚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'));
相关推荐
布列瑟农的星空2 分钟前
大话设计模式——关注点分离原则下的事件处理
前端·后端·架构
山有木兮木有枝_5 分钟前
node文章生成器
javascript·node.js
yvvvy21 分钟前
前端必懂的 Cache 缓存机制详解
前端
北海几经夏37 分钟前
React自定义Hook
前端·react.js
龙在天41 分钟前
从代码到屏幕,浏览器渲染网页做了什么❓
前端
TimelessHaze42 分钟前
【performance面试考点】让面试官眼前一亮的performance性能优化
前端·性能优化·trae
yes or ok1 小时前
前端工程师面试题-vue
前端·javascript·vue.js
我要成为前端高手1 小时前
给不支持摇树的三方库(phaser) tree-shake?
前端·javascript
Noxi_lumors1 小时前
VITE BALABALA require balabla not supported
前端·vite
周胜21 小时前
node-sass
前端