面试题：Webpack 在 React 微前端架构下的构建与部署策略

1. 公共依赖处理

DllPlugin 与 DllReferencePlugin

DllPlugin: 在一个单独的 Webpack 配置文件（例如 webpack.dll.js）中，使用 DllPlugin 提取公共依赖。例如，对于 React 和 React - DOM 这样的常用库：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        vendor: ['react','react - dom']
    },
    output: {
        path: path.join(__dirname, 'dll'),
        filename: '[name].dll.js',
        library: '[name]_library'
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, 'dll', '[name].manifest.json'),
            name: '[name]_library'
        })
    ]
};

DllReferencePlugin: 在各个微前端应用的 Webpack 配置中，使用 DllReferencePlugin 引用生成的 DLL 文件。

const path = require('path');
const webpack = require('webpack');

module.exports = {
    //...其他配置
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./dll/vendor.manifest.json')
        })
    ]
};

externals
- 对于一些不会打包进应用的外部库（如通过 CDN 引入的库），可以使用 externals 配置。例如，如果通过 CDN 引入 React 和 React - DOM：
```
module.exports = {
    //...其他配置
    externals: {
        react:'react',
        'react - dom':'react - dom'
    }
};
```

2. 模块联邦（Module Federation）配置

主应用配置

安装 @module - federation/webpack 插件。
在主应用的 Webpack 配置（webpack.config.js）中：

const path = require('path');
const ModuleFederationPlugin = require('@module - federation/webpack').ModuleFederationPlugin;

module.exports = {
    //...其他配置
    output: {
        publicPath: 'auto'
    },
    plugins: [
        new ModuleFederationPlugin({
            name: 'host',
            remotes: {
                microApp1: 'microApp1@http://localhost:3001/remoteEntry.js',
                microApp2: 'microApp2@http://localhost:3002/remoteEntry.js'
            },
            shared: {
                react: {
                    singleton: true,
                    eager: true
                },
               'react - dom': {
                    singleton: true,
                    eager: true
                }
            }
        })
    ]
};

微前端应用配置

同样安装 @module - federation/webpack 插件。
以 microApp1 为例，在其 Webpack 配置中：

const path = require('path');
const ModuleFederationPlugin = require('@module - federation/webpack').ModuleFederationPlugin;

module.exports = {
    //...其他配置
    output: {
        publicPath: 'http://localhost:3001/'
    },
    plugins: [
        new ModuleFederationPlugin({
            name:'microApp1',
            filename:'remoteEntry.js',
            exposes: {
                './App': './src/App'
            },
            shared: {
                react: {
                    singleton: true,
                    eager: true
                },
               'react - dom': {
                    singleton: true,
                    eager: true
                }
            }
        })
    ]
};

3. 高效部署策略

独立开发部署
- 开发阶段：每个微前端应用可以在本地独立启动开发服务器。例如，使用 webpack - dev - server，在 package.json 中配置启动脚本：
```
{
    "scripts": {
        "start": "webpack - dev - server --config webpack.config.js"
    }
}
```
- 部署阶段：将每个微前端应用构建后的产物部署到各自独立的服务器或 CDN 上。例如，使用 CI/CD 工具（如 Jenkins、GitHub Actions 等），在构建成功后将产物上传到对应的服务器目录或 CDN 存储空间。
协同工作部署
- 主应用部署：主应用部署时，确保其配置的 remotes 中微前端应用的 URL 是正确的部署地址。例如，如果微前端应用部署到生产环境的 CDN 上，更新主应用 webpack.config.js 中的 remotes 配置为生产 CDN 地址。
- 资源缓存：为了提高加载效率，可以对静态资源设置合理的缓存策略。在服务器端配置 HTTP 缓存头，对于不经常变化的公共依赖（如 DLL 文件）设置较长的缓存时间，对于微前端应用的代码和资源根据其更新频率设置合适的缓存时间。
- 版本管理：使用语义化版本号管理各个微前端应用和主应用，当微前端应用更新时，确保主应用的 remotes 配置中的版本信息（如果有）和微前端应用实际发布版本一致，避免兼容性问题。

星途面试题库

面试题：Webpack 在 React 微前端架构下的构建与部署策略

知识考点

面试题答案

1. 公共依赖处理

2. 模块联邦（Module Federation）配置

3. 高效部署策略