面试题：Webpack多入口多出口动态配置在复杂微前端架构中的应用

Question

在一个基于微前端架构的项目中，有多个独立的子应用，每个子应用都有自己的Webpack配置且需动态生成多入口多出口。同时，要考虑不同子应用之间可能存在的公共依赖如何高效管理，以及在运行时如何实现子应用之间的资源共享和热更新。请阐述整体的Webpack配置策略、可能遇到的问题及解决方案。

Answer 1

Webpack配置策略

1. 多入口多出口配置：
   • 在Webpack配置文件中，通过entry字段定义多个入口。例如，假设子应用分别为app1、app2，可以这样配置：

entry: {
    app1: './src/app1/index.js',
    app2: './src/app2/index.js'
}

- 对于`output`，通过占位符配置多出口：

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js'
}

2. 公共依赖管理：
   • 使用splitChunks插件。该插件可以将公共依赖提取出来，生成单独的chunk。例如：

optimization: {
    splitChunks: {
        chunks: 'all',
        name:'vendors'
    }
}

- 这样会将所有子应用的公共依赖提取到`vendors.[chunkhash].js`文件中，在HTML中引入该文件即可实现公共依赖的复用。

3. 资源共享与热更新： - 资源共享：通过CDN引入公共资源。可以将公共依赖发布到CDN，子应用在构建时配置externals，例如对于react和react - dom：

externals: {
    react: 'React',
    'react - dom': 'ReactDOM'
}

- **热更新**：启用`webpack - dev - server`并配置HMR（Hot Module Replacement）。在Webpack配置中添加：

devServer: {
    hot: true
}

在子应用代码中，接受更新模块。例如在React应用中，可以这样处理：

if (module.hot) {
    module.hot.accept();
}

可能遇到的问题及解决方案

1. 公共依赖版本冲突：
   • 问题：不同子应用可能依赖同一库的不同版本。
   • 解决方案：使用工具如yarn resolutions或npm - force - resolve锁定公共依赖的版本。或者使用webpack - alias对特定库进行别名配置，指向统一版本。
2. 热更新失效：
   • 问题：子应用在热更新时出现异常，如样式不更新、模块更新不生效。
   • 解决方案：检查webpack - dev - server配置是否正确，确保hot选项开启。同时，检查子应用代码中是否正确接受热更新模块。对于样式，确保使用的加载器支持热更新，如style - loader。
3. 多入口打包体积过大：
   • 问题：随着子应用增多，打包后的文件体积变大，影响加载性能。
   • 解决方案：进一步优化splitChunks配置，更细粒度地拆分公共代码。同时，开启代码压缩，如使用terser - webpack - plugin对代码进行压缩。还可以考虑使用Tree - shaking去除未使用的代码。