面试题：Webpack多入口多出口在复杂项目架构中的实践与问题解决

Question

假设你在一个大型微前端架构项目中使用Webpack多入口多出口配置，不同入口对应的模块可能存在大量重复代码，且需要实现各个子应用之间的资源共享和按需加载。请阐述你会采取哪些策略来解决这些问题，并说明在Webpack配置层面的具体实现方式。

Answer 1

解决策略

1. 代码拆分与公共模块提取：使用Webpack的代码拆分功能，将重复代码提取到公共模块中，避免每个入口重复打包。这样既减少了文件体积，又能实现资源共享。
2. 动态导入（按需加载）：对于子应用中不常使用的模块，采用动态导入的方式，在需要时再加载，而不是在应用启动时全部加载，提高应用的初始加载性能。

Webpack配置层面具体实现方式

1. 公共模块提取（使用SplitChunksPlugin）：

module.exports = {
  //...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'initial',
          minChunks: 2
        }
      }
    }
  }
};

上述配置中，splitChunks.chunks设置为all表示对所有类型的chunk进行拆分。cacheGroups.commons定义了一个缓存组，name指定公共模块的名称为commons，chunks: 'initial'表示只对入口chunk进行拆分，minChunks: 2表示至少被两个chunk引用的模块才会被提取到公共模块中。 2. 动态导入（使用import()语法）： 在子应用代码中，例如需要动态加载一个模块SomeModule，可以这样写：

// 异步导入SomeModule
import('./SomeModule').then((module) => {
  // 使用module中的内容
  module.doSomething();
}).catch((error) => {
  console.error('加载模块失败:', error);
});

Webpack会自动将SomeModule拆分出来，实现按需加载。在Webpack配置中，无需额外配置，Webpack默认支持这种动态导入语法并进行代码拆分。