什么是 webpack ?
约 1181 字大约 4 分钟
2024-07-06
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。
当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph) ， 然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
Webpack 解决了什么？
在复杂的前端项目中，我们会面临诸多挑战：
- 模块化开发： 现代前端使用 ES Modules、CommonJS 等将代码拆分为小模块。浏览器对原生 ES Modules 的支持虽在提升，但在兼容性、性能（大量 HTTP 请求）上仍有不足。
- 资源多样性： 项目不仅需要 JavaScript，还包括 CSS（Sass/Less）、图片、字体、HTML 模板等，浏览器无法直接处理非 JS 资源。
- 代码优化： 未压缩的代码体积庞大；重复代码；未使用的代码（Dead Code）影响性能。
- 开发效率： 手动管理依赖、刷新浏览器、等待构建缓慢。
- 兼容性： 需要使用新语法（ES6+、JSX、TypeScript）但需确保在旧浏览器中运行。
Webpack 的核心价值正是优雅地解决上述问题！
webpack 工作流程
- 初始化： 读取配置，创建 Compiler 实例，加载插件。
- 开始编译： 从配置的 entry 开始，调用 Compiler 的
run方法启动编译。 - 确定依赖： 从入口文件开始，对遇到的每一个
import/require语句，解析模块路径，递归 地构建项目的依赖图(Dependency Graph)。 - Loader 处理： 对依赖图中的每个模块（文件），根据
module.rules配置，使用匹配的 Loader 进行转换（如 TS -> JS, SCSS -> CSS -> JS 可处理字符串）。 - 编译模块： 经过 Loader 转换后的模块内容，被解析为 AST 语法树，分析其依赖关系和导出内容。
- 生成 Chunks： 将处理好的模块及其依赖，根据配置（入口点、动态导入、SplitChunksPlugin 优化策略）组合成 Chunk(s)。一个 Bundle 通常对应一个 Chunk（但可通过代码分割有多个）。
- 输出资源： 根据
output配置，将每个 Chunk 转换为最终的输出文件（Bundle）。在这个过程中，插件可以介入执行特定任务（如生成 HTML、压缩代码、拷贝静态文件等）。 - 完成： 所有 Chunks 和 Assets 输出到目标目录，构建结束。
Webpack 带来的核心优势
模块化打包： 解决依赖管理和浏览器加载问题，将碎片化模块打包成少量高效资源。
万物皆模块： 通过 Loader，任何资源都能像 JS 模块一样被导入和使用 (import './style.css')。
强大的预处理/转换能力： 利用 Loader 链，支持 Babel (ES6+/JSX/TS)、Sass/Less、PostCSS 等现代开发工具链。
高度可扩展性： 庞大的 Plugin 生态系统覆盖开发、优化、部署等全生命周期需求。
开发效率提升：
- 开发服务器(webpack-dev-server): 提供热更新(HMR)，文件修改后局部刷新，保持应用状态。
- Source Map: 调试打包后的代码如同调试源代码。
生产环境优化：
- 代码压缩/混淆(TerserPlugin): 减小文件体积。
- Tree Shaking: 移除未使用的 JS 代码 (ES Module 静态结构)。
- Code Splitting / Lazy Loading: 拆分代码，按需加载，提升首屏速度。
- Scope Hoisting: 提升作用域，减少闭包，优化运行速度。
- 文件哈希命名： 利用缓存策略提升加载性能。
Webpack 在现代前端中的地位
尽管时下其它工具如 Vite 在开发体验（利用原生 ESM）上带来了革新， Webpack 凭借其 无与伦比的成熟度、稳定性、灵活性和极其丰富的生态系统，依然是：
- 大型复杂项目的首选： 其配置的深度和 Plugin 生态能应对极其复杂的定制化需求。
- 生产优化的标杆： 在构建生产环境优化 Bundle 方面经验丰富，功能强大且可靠。
社区支持
vue-cli - 维护模式
Vue 官方维护的，基于 webpack 构建，集成了常规 Vue 项目的开发、构建、部署流程等套件，易上手。
create-react-app - Deprecated
Create React App 是官方支持的创建单页 React 应用程序的方式。它提供了无需配置的现代化构建环境。
目前已经不再维护，不推荐使用。