在 Webpack 构建过程中，当代码中通过 Import 引入 node_modules 里的依赖时，Webpack 内部会执行哪些处理步骤？请描述其解析、打包和优化机制。
考察说明
考察对 Webpack 模块解析和打包机制的理解，特别是对第三方依赖的处理流程。
回答思路
- 【回答框架 1】Webpack 在处理 import 语句时，首先进行模块解析（resolve）。它会根据配置中的 resolve.modules 查找 node_modules 目录，并根据 mainFields、alias 等配置确定入口文件。例如，默认会优先使用 package.json 中的 module 或 main 字段。
- 【回答框架 2】解析完成后，Webpack 会加载模块代码。对于 node_modules 中的依赖，通常使用 js 加载器（如 babel-loader）进行转换，但会根据配置排除掉 node_modules 中的转译，以提升构建性能，因为第三方库通常已提供编译后的代码。
- 【回答框架 3】Webpack 会构建模块依赖图，并分析模块之间的依赖关系。对于第三方依赖，如果存在多个版本，Webpack 会通过解析规则选择合适版本，可能使用 package.json 的 dependencies 或 peerDependencies 来确定。
- 【回答框架 4】在打包阶段，Webpack 会将第三方模块打包到 bundle 中。如果使用 tree shaking，会通过分析 import 和 export 的静态结构，移除未使用的代码。对于 CommonJS 模块，tree shaking 通常无效，但 Webpack 会尝试进行兼容处理。
- 【回答框架 5】Webpack 还支持代码分割，通过动态 import 或配置 splitChunks，将第三方库拆分为独立的 chunk，以便利用浏览器缓存，减少首屏加载体积。
- 【关键点 1】模块解析会根据 resolve.modules 和 mainFields 确定入口文件，默认查找 node_modules。
- 【关键点 2】babel-loader 通常排除 node_modules 以避免重复转译，提升构建速度。
- 【关键点 3】Webpack 构建模块依赖图，并处理版本冲突和 polyfill 需求。
- 【关键点 4】Tree shaking 基于 ES Module 静态分析，有效移除未用代码，但 CommonJS 难以优化。
- 【关键点 5】代码分割可提取公共依赖，优化缓存和加载性能。
- 【易错点 1】直接声称 Webpack 会为所有第三方依赖单独打包，实际需看 splitChunks 配置。
- 【易错点 2】对 CommonJS 模块使用 tree shaking 效果有限，不能保证完全移除未用代码。
- 【易错点 3】忽略 resolve.alias 和 resolve.extensions 的配置影响，可能导致解析失败。