面试题：Webpack依赖图与多端应用架构的适配

1. Webpack依赖图针对多端的特殊处理和优化

目标环境配置：使用 webpack-merge 等工具，为Web、iOS、Android分别创建不同的配置文件。例如，对于Web端，可以使用默认的 webpack.config.js，而对于移动端，可以创建 webpack.mobile.js。在不同配置文件中针对不同端的特性设置 target，如Web端 target: 'web'，Node.js环境（用于SSR等移动端可能的需求） target: 'node'。
依赖分析与排除：分析不同端的特有依赖，比如iOS端可能依赖 react-native 特定库，而Web端不需要。在Webpack配置中，通过 externals 配置排除Web端不需要的移动端依赖，避免打包进Web代码。例如：

externals: {
  'react-native': 'commonjs react-native'
}

2. 基于依赖图的代码拆分

按端拆分：利用Webpack的 splitChunks 插件，按端拆分代码。例如，可以配置不同的入口文件，Web端入口 entry.web.js，移动端入口 entry.mobile.js，然后通过 splitChunks 将公共部分和端特定部分分开。

module.exports = {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      web: {
        name: 'web-vendors',
        test: (module) => /web-only-dependency/.test(module.context),
        chunks: 'initial',
        enforce: true
      },
      mobile: {
        name:'mobile-vendors',
        test: (module) => /mobile-only-dependency/.test(module.context),
        chunks: 'initial',
        enforce: true
      }
    }
  }
};

动态导入：在代码中使用动态导入（import()）来实现按需加载。例如，对于一些不常用的功能模块，在Web和移动端都可以在需要时才加载。在Web端，这可以通过 import() 配合Webpack的代码拆分能力实现懒加载；在移动端，react - native 也支持动态导入来优化加载性能。

3. 资源管理

图片处理：对于不同端，图片资源处理有所不同。Web端可以使用 url-loader 或 file-loader 根据图片大小决定是否内联。而在移动端，通常使用特定的图像加载库（如 react-native-image）。可以在Webpack配置中针对不同端配置不同的图片处理规则。例如：

{
  test: /\.(png|jpg|gif)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: 'images/[name].[ext]',
        publicPath: process.env.NODE_ENV === 'production'? '/static/' : '/'
      }
    }
  ]
}

字体管理：Web端可通过 @font - face 引入字体，而移动端则依赖于系统字体或特定的字体加载库。可以通过Webpack配置不同端的字体资源路径和加载方式。

4. 跨端模块复用

公共模块提取：将Web和移动端共用的代码提取到一个公共模块中，比如工具函数、数据模型等。通过Webpack的 splitChunks 将公共模块拆分出来，确保在不同端都能复用。例如：

module.exports = {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      commons: {
        name: 'commons',
        chunks: 'initial',
        minChunks: 2
      }
    }
  }
};

条件导入：在代码中使用条件导入，根据运行环境导入不同端的特定实现。例如，在JavaScript中可以通过 process.env.TARGET 判断是Web还是移动端，然后导入相应模块。

if (process.env.TARGET === 'web') {
  import webSpecificModule from './web - specific - module';
} else if (process.env.TARGET ==='mobile') {
  import mobileSpecificModule from './mobile - specific - module';
}

5. 实践经验

自动化构建脚本：编写自动化构建脚本，根据不同的端执行不同的Webpack配置。例如，使用 npm scripts 定义 build:web、build:mobile 等脚本，分别执行Web和移动端的构建。
持续集成：在持续集成（CI）流程中，配置不同端的构建任务。例如，在GitHub Actions或CircleCI中，分别配置Web和移动端的构建步骤，确保代码在不同端都能正确构建。

6. 可能遇到的坑及解决方案

依赖冲突：不同端依赖的同一库版本不同可能导致冲突。解决方案是尽量统一库版本，或者使用 webpack - alias 来别名不同版本的库，确保在不同端使用各自合适的版本。
性能问题：在移动端，由于设备性能差异，可能出现加载慢的问题。优化图片资源、减少初始加载代码量，使用代码拆分和懒加载等方式可以缓解此问题。在Web端，可能会因为过多的内联资源导致首屏加载慢，合理设置 url-loader 等参数，优化资源加载顺序可以解决。

面试题：Webpack依赖图与多端应用架构的适配

知识考点

面试题答案

1. Webpack依赖图针对多端的特殊处理和优化

2. 基于依赖图的代码拆分

3. 资源管理

4. 跨端模块复用

5. 实践经验

6. 可能遇到的坑及解决方案