一、结构化理解 Webpack 配置项
Webpack 的打包过程非常复杂，但大致上可简化为：
- 输入：从文件系统读入代码文件；
- 模块递归处理：调用 Loader 转译 Module 内容，并将结果转换为 AST，从中分析出模块依赖关系，进一步递归调用模块处理过程，直到所有依赖文件都处理完毕；
- 后处理：所有模块递归处理完毕后开始执行后处理，包括模块合并、注入运行时、产物优化等，最终输出 Chunk 集合；
- 输出：将 Chunk 写出到外部文件系统；
二、配置分类
从上述打包流程角度，Webpack 配置项大体上可分为两类：
- 流程类：作用于打包流程某个或若干个环节，直接影响编译打包效果的配置项
- 工具类：打包主流程之外，提供更多工程化工具的配置项
1.流程类
Webpack 首先需要根据输入配置(
entry/context) 找到项目入口文件；之后根据按模块处理(module/resolve/externals 等) 所配置的规则逐一处理模块文件，处理过程包括转译、依赖分析等；模块处理完毕后，最后再根据后处理相关配置项(optimization/target 等)合并模块资源、注入运行时依赖、优化产物结构等。与打包流程强相关的配置项有：
- 输入输出：
entry：用于定义项目入口文件，Webpack 会从这些入口文件开始按图索骥找出所有项目文件；context：项目执行上下文路径；output：配置产物输出路径、名称等；
- 模块处理：
resolve：用于配置模块路径解析规则，可用于帮助 Webpack 更精确、高效地找到指定模块module：用于配置模块加载规则，例如针对什么类型的资源需要使用哪些 Loader 进行处理externals：用于声明外部资源，Webpack 会直接忽略这部分资源，跳过这些资源的解析、打包操作
- 后处理：
optimization：用于控制如何优化产物包体积，内置 Dead Code Elimination、Scope Hoisting、代码混淆、代码压缩等功能target：用于配置编译产物的目标运行环境，支持 web、node、electron 等值，不同值最终产物会有所差异mode：编译模式短语，支持development、production等值，可以理解为一种声明环境的短语- 开发效率类：
watch：用于配置持续监听文件变化，持续构建devtool：用于配置产物 Sourcemap 生成规则devServer：用于配置与 HMR 强相关的开发服务器功能- 性能优化类：
cache：Webpack 5 之后，该项用于控制如何缓存编译过程信息与编译结果performance：用于配置当产物大小超过阈值时，如何通知开发者- 日志类：
stats：用于精确地控制编译过程的日志内容，在做比较细致的性能调试时非常有用infrastructureLogging：用于控制日志输出方式，例如可以通过该配置将日志输出到磁盘文件
2.工具类
除了核心的打包功能之外，Webpack 还提供了一系列用于提升研发效率的工具，大体上可划分为：
逻辑上，每一个工具类配置都在主流程之外提供额外的工程化能力，例如
devtool 用于配置产物 Sourcemap 生成规则，与 Sourcemap 强相关；devServer 用于配置与 HMR 相关的开发服务器功能；watch 用于实现持续监听、构建。工具类配置内聚性较强，通常一个配置项专注于解决一类工程问题，学习时建议先对配置项按其功能做个简单分类，例如上述开发效率类、性能优化类等，之后再展开研究其可选值与效果。