Webpack

定义

Webpack 是一款面向现代 JavaScript 应用的静态模块打包工具。它将项目中的脚本、样式、图片等各类资源视为模块,依据它们之间的依赖关系构建出依赖图,并最终打包为少量可供浏览器加载的静态产物。[1]

原理

Webpack 从一个或多个入口(entry)出发,递归解析模块间的 import/require 依赖,构建完整的依赖图。在此过程中,加载器(loader)负责将非 JavaScript 资源转换为可被打包的模块,如将 TypeScript 编译为 JavaScript、将样式内联处理;插件(plugin)则介入构建生命周期,完成代码压缩、资源注入、产物分析等更广泛的任务。Webpack 支持代码分割、按需加载、Tree Shaking(剔除未使用代码)与持久化缓存等优化手段。

特点

优点在于:生态极其成熟,加载器与插件覆盖几乎所有构建需求;配置高度灵活,能应对复杂的定制化场景;长期作为业界事实标准,资料与经验丰富。缺点在于:配置相对繁琐、上手门槛较高;在大型项目中,由于采用整体打包模式,开发启动与热更新速度逊于基于原生 ESM 的新一代工具。

应用

Webpack 长期支撑了大量生产级前端项目与框架脚手架。尽管 Vite、esbuild、Turbopack 等更快的工具正逐步分流新项目,Webpack 凭借其稳定性与生态深度,在存量项目维护与高度定制的复杂构建场景中仍占有重要地位。