面试题：Webpack入口与出口配置在微前端架构中的挑战与应对方案

挑战分析

子应用资源隔离
- 问题：不同子应用可能会使用相同的全局变量、CSS类名等，导致命名冲突，影响应用的正常运行。例如，子应用A和子应用B都定义了全局变量$，在同时加载时会产生冲突。
- 原因：传统的前端开发模式下，所有资源都在同一个全局作用域中，而微前端架构下多个子应用并行存在，打破了这种单一的全局环境。
共享模块处理
- 问题：多个子应用可能依赖相同的模块，如React、Vue等框架库。如果每个子应用都单独打包这些共享模块，会导致代码冗余，增加加载体积，降低加载性能。例如，子应用A和子应用B都依赖React 17.0.2，若各自打包，会重复加载该版本的React库。
- 原因：每个子应用独立打包，缺乏对共享模块统一管理的机制。

应对方案

Webpack配置调整

子应用资源隔离
- CSS隔离：
  - 使用CSS Modules，在Webpack中配置css - loader开启modules选项。例如：
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style - loader',
            {
              loader: 'css - loader',
              options: {
                modules: true
              }
            }
          ]
        }
      }
    ]
  }
};
```
  - 这样每个CSS文件中的类名会被自动生成唯一的哈希值，避免了类名冲突。
- JavaScript隔离：
  - 使用ES6模块的作用域特性，确保每个模块都有自己独立的作用域。在Webpack配置中，确保使用es - module - loader或支持ES6模块的相关配置。例如，对于ESM模块，Webpack默认支持其正确的作用域隔离。
  - 对于CommonJS模块，可以通过webpack - externals - plugin将子应用的一些模块声明为外部模块，使其不参与打包，避免全局变量冲突。例如：
```
const webpack = require('webpack');
module.exports = {
  externals: {
    'jquery': 'jQuery'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};
```

共享模块处理

使用DllPlugin和DllReferencePlugin：

首先，为共享模块创建一个单独的DLL（动态链接库）。在Webpack配置文件（如webpack.dll.js）中：

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

然后，在每个子应用的Webpack配置文件中使用DllReferencePlugin引用这个DLL。例如：

const path = require('path');
const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: path.join(__dirname, 'dist', 'vendor.manifest.json')
    })
  ]
};

使用Webpack 5的Module Federation：

在主应用（或容器应用）的Webpack配置中：

const path = require('path');
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
module.exports = {
  output: {
    publicPath: 'http://localhost:3000/'
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js',
        app2: 'app2@http://localhost:3002/remoteEntry.js'
      }
    })
  ]
};

在子应用（如app1）的Webpack配置中：

const path = require('path');
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
module.exports = {
  output: {
    publicPath: 'http://localhost:3001/'
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename:'remoteEntry.js',
      exposes: {
        './App': './src/App.js'
      }
    })
  ]
};

通过Module Federation，子应用可以共享模块，避免重复打包。

额外工具或技术
- 使用微前端框架：如Single - SPA，它提供了一套完整的微前端解决方案，包括子应用的加载、卸载、通信等功能。它可以与Webpack配置结合，进一步优化子应用的资源隔离和共享模块处理。例如，在使用Single - SPA时，可以通过其生命周期钩子函数，在子应用加载前和卸载后进行资源清理等操作，加强资源隔离。
- CDN（内容分发网络）：对于一些通用的共享模块，如常用的JavaScript库（如lodash、moment等），可以通过CDN引入。在Webpack配置中，使用html - webpack - externals - plugin将这些CDN引入的库声明为外部资源，不参与打包。例如：
```
const HtmlWebpackExternalsPlugin = require('html - webpack - externals - plugin');
module.exports = {
  plugins: [
    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: 'lodash',
          entry: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js',
          global: '_'
        }
      ]
    })
  ]
};
```
这样既减少了子应用的打包体积，又利用CDN的缓存和分发优势，提高加载性能。

面试题：Webpack入口与出口配置在微前端架构中的挑战与应对方案

知识考点

面试题答案

挑战分析

应对方案