前端

大家好，今天来了解下webpack的模块联邦，以后可能是一个新的开发模式。

Module Federation

Module Federation 允许 JavaScript 应用程序动态运行来自另一个捆绑包的代码，或是在客户端和服务器上构建代码。Module Federation 是一个插件，可用于webpack 5，也可以用于功能有限的 webpack 4 和 Rollup。在使用 ModuleFederation 之前必须了解以下两个重要概念。

一个host可以加载多个remote，host代表App shell，remote 代表其中的一个微前端。

模块联邦使用

1.创建一个remote工程，暴露出一个组件，提供给容器使用2、再创建一个host工程，引用远程

创建remote工程安装依赖包

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react -D

npm i react react-dom

配置基本webpack

const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devServer: {
    port: 8080,
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        }
      },
    ],
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index.html',
      inject: true
    }),
  ]
}

加载使用组件

// index.js
import React from "react";
import { createRoot } from 'react-dom/client'
import App from "./App";
const container = document.getElementById('root')
const root = createRoot(container)
root.render(<App />)
// App.js
import React from "react";
import NewsList from "./NewsList";
const App = () => {
  return (<div>
    <h1>本地组件h1>
    <NewsList>NewsList>
  div>)
}
export default App
// NewsList
import React from "react";
const NewsList = () => {
  return (<div>
    <h1>remote newlisth1>
  div>)
}
export default NewsList;

配置webpack，共享组件

打包之后，可以在dist文件夹中找到remoteEntry.js

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'remote',
      filename: 'remoteEntry.js',
      exposes: {
        './NewsList': './src/NewsList'
      }
    })
  ]
}

host工程中使用远程组件

1.在webpack中配置，引入远程组件

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
    // ...
    plugins: [
        new ModuleFederationPlugin({
          name: 'host',
          remotes: {
            remote: 'remote@http://localhost:8080/remoteEntry.js' // 引入在线组件
          }
        })
    ]
}

2.在组件中使用远程组件

import React from "react";
import RemoteNewsList from "remote/NewsList";
import Slider from "./Slider";
const App = () => {
  return (<div>
    <h1>远程组件h1>
    <RemoteNewsList>RemoteNewsList>
    <h1>本地组件h1>
    <Slider>Slider>
  div>)
}
export default App

最后

这个只是一个比较简单的模块联邦的使用，后面用到在深入了解

参考资料

代码git地址