面试题：Webpack配置文件在复杂微前端架构下的动态组织与适配

Question

在一个基于微前端架构的项目中，各个子应用可能有不同的技术栈和构建需求。请详细说明如何动态组织Webpack配置文件，使其能够自适应不同子应用的构建，包括但不限于处理公共依赖、动态加载模块以及跨子应用的样式隔离等问题，并给出关键的配置思路和代码片段。

Answer 1

1. 动态组织Webpack配置文件思路

1. 基础配置抽取：创建一个基础的Webpack配置文件，包含一些通用的配置，如入口、输出路径、模块解析规则等。
2. 子应用特定配置：为每个子应用创建单独的配置文件，覆盖或补充基础配置中与子应用相关的部分，如特定的技术栈相关loader、插件等。
3. 合并配置：使用webpack - merge库将基础配置和子应用特定配置合并。

2. 处理公共依赖

1. splitChunks插件：在基础配置中使用splitChunks插件来提取公共依赖。

// webpack.base.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

2. CDN引入：对于一些大型的公共库，如React、Vue等，可以通过CDN引入，减少打包体积。在HTML模板中添加CDN链接，并在Webpack配置中配置externals。

// webpack.base.js
module.exports = {
  externals: {
    'react': 'React',
      'react - dom': 'ReactDOM'
  }
};

3. 动态加载模块

1. import()语法：在代码中使用import()语法实现动态加载模块。

// 动态加载子模块
const loadModule = async () => {
  const module = await import('./subModule.js');
  module.default();
};

2. Webpack配置：Webpack会自动处理动态导入，将动态导入的模块拆分出来。

4. 跨子应用的样式隔离

1. CSS Modules：在每个子应用中使用CSS Modules，将样式作用域限定在当前组件或模块内。

// webpack子应用配置文件
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style - loader',
          {
            loader: 'css - loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
};

2. Shadow DOM：对于一些复杂场景，可以使用Shadow DOM来实现更彻底的样式隔离，但需要更多的JavaScript代码来操作。

5. 关键代码片段 - 合并配置

// webpack.base.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel - loader',
        exclude: /node_modules/
      }
    ]
  }
};

// webpack.app1.js
const merge = require('webpack - merge');
const baseConfig = require('./webpack.base.js');

module.exports = merge(baseConfig, {
  // app1特定配置
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style - loader',
          'css - loader',
          'less - loader'
        ]
      }
    ]
  }
});

在构建子应用时，根据子应用名称调用相应的Webpack配置文件，如webpack --config webpack.app1.js。