第十一周：模块联邦 - 微前端

// App2
const { ModuleFederationPlugin } = require('webpack').container
const path = require('path')

module.exports = {
  entry: './src/index',
  mode: 'development',
  devServer: {
    static: path.join(__dirname, 'dist'),
    port: 3002,
  },
  output: {
    publicPath: 'auto',
  },
  plugins: [
    new ModuleFederationPlugin({
      // 远程组件的应用名称
      name: 'app2',
      // 远程组件的入口文件
      filename: 'remoteEntry.js',
      // 定义需要导出的组件列表
      exposes: {
        './App': './src/App',
        './Component': './src/component',
      },
      // 可以被共享的模块
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
}

// App1
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ModuleFederationPlugin } = require('webpack').container
const path = require('path')

module.exports = {
  entry: './src/index',
  mode: 'development',
  devServer: {
    static: path.join(__dirname, 'dist'),
    port: 3001,
  },
  output: {
    publicPath: 'auto',
  },
  plugins: [
    new ModuleFederationPlugin({
      // 当前应用名称
      name: 'app1',
      // 远程应用加载js入口列表
      remotes: {
        app2: 'app2@http://localhost:3002/remoteEntry.js',
      },
      //共享的模块
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
}