深入梳理Webpack配置逻辑

Webpack5提供了非常强大、灵活的模块打包功能，且其 Plugin、Loader生态数量庞大，但代价是日益复杂、晦涩的使用方法。仅 Webpack 原生配置项就多达上百种，如何理解配置及配置件的关系是一个头疼的问题。

配置项

Webpack 打包过程非常复杂，但大致上可以简化为：

1. 输入：从文件系统读入代码文件。
2. 模块处理：调用 Loader转译模块内容，将结果转为 AST，分析模块依赖关系，进一步递归调用模块处理过程，知道所有依赖文件都处理完毕。
3. 后处理：所有模块处理完毕后进行一系列包括：模块合并、注入运行时、产物优化，最终输出 Chunk 集合。
4. 输出：将 Chunk 写到外部文件系统。

流程类配置

输入输出：

• entry：定义项目入口文件，Webpack 会从这些入口文件开始找出所有项目文件
• context：项目执行上下文路径
• output：配置产物输出路径、名称等；

模块处理：

• resolve：配置模块路径解析规则，更精确、高效地找到指定模块
• 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：控制日志输出方式，例如可以通过该配置将日志输出到磁盘文件