文章目录webpack前端打包领域的老牌基建webpack前端打包领域的老牌基建webpack 在 GitHub 上拿到了 65,834 颗 Star是前端工程化绕不开的一块基础设施。webpack 是一个模块打包工具。它最初的目标是把 JavaScript 文件打包成浏览器可用的产物后来扩展到几乎所有静态资源。CSS、图片、字体、模板只要配合对应的 loader都能纳入同一个打包流程。它的核心定位是 bundler。源码在编译阶段就把依赖关系解析清楚运行时不再需要重复计算。这种方式压缩了产物体积也让按需加载成为可能。静态分析会扫一遍代码的 AST必要时还会做轻量求值多数现有三方库可以直接接入不用额外改造。主要能力可以拆成几块。第一是模块体系。webpack 同时支持 ES Modules、CommonJS 和 AMD三种格式可以混用。对老项目迁移、对三方依赖的兼容都比较友好。第二是代码分割。它能把代码库切成多个 chunk运行时按需异步加载。首屏只加载必要片段其余延迟拉取初始加载时间被压下来。配合 chunk 文件名加 hash浏览器缓存命中率也能维持得比较稳发版时只需让变更过的几个文件失效。第三是 Loaders。打包前可以做一次预处理。TypeScript 转 JavaScriptHandlebars 字符串转编译函数图片转 Base64都能在 loader 链里完成。loader 是 webpack 模块化的第一层扩展。官方维护的 loader 覆盖了样式、模板、转译、JSON 等常见类别社区里还有不少第三方 loader 用于处理音视频、字体子集、图形编译、Markdown 渲染等场景需要自己定制时按接口实现一个本地 loader 即可。第四是 Plugins。loader 处理文件本身plugin 处理更宏观的流程。构建生命周期、产物形态、缓存策略、压缩、HTML 生成基本都靠 plugin 实现。webpack 自身的多数功能也走这套 hook 系统所以灵活度很高。市面上的插件已经覆盖了大多数常见需求从压缩到 PWA 到国际化都能找到现成方案。第五是性能。webpack 使用异步 I/O有多层缓存。增量编译速度比较快在大型项目里这个优势会被放大。v5 引入的持久化缓存可以把中间结果写到磁盘二次构建时直接复用CI 流水线和 Monorepo 场景下表现比较明显。第六是优化。它能在打包阶段做去重、压缩、按需加载、内容加 hash 等处理让产物体积更小、缓存命中率更高。Tree shaking 在 ES Modules 上做了静态分析没被引用的导出会被裁掉。Scope Hoisting 把模块内联进作用域减少包裹函数开销。这些优化在生产模式下默认开起配置侧不用拆太多参数。安装比较简单。npm 一行就能装上npm install --save-dev webpack或者用 yarnyarn add webpack --dev浏览器兼容性方面webpack 支持所有符合 ES5 的浏览器IE8 及以下不在范围内。import()和require.ensure()依赖 Promise如果要支持更老的浏览器需要提前加载一个 polyfill。webpack 的生态不止主仓库一个。loaders 在 webpack-contrib 组织下维护文档站点单独一个仓库 Discussions 区和 Discord 频道都开着。贡献者指南、治理结构、TSC 与 Core Collaborators 名单都公开在仓库里。新 loader 或 plugin 按惯例使用x-loader和x-webpack-plugin命名。工具自身的定位是底层基建。它不是最易上手的方案但能力面足够宽。上面跑得了 Vue、Angular、Svelte 各种框架 loader也撑得起 CSS、HTML、Markdown、Pug 等模板体系。需要 PWA、SSR、微前端、Monorepo 构建时webpack 仍是很多团队的默认选择。对新手而言官方的概念页和 Get Started 指南比 README 更适合入门。把 entry、output、loader、plugin、mode 几个概念理清再回头看配置文件会顺畅很多。社区里 v5 之后稳定下来的配置写法、Module Federation、持久缓存等特性已经在生产侧用了几年资料比较齐。仓库地址在 README 顶部就能看到。需要深挖源码、提 issue、看贡献指南的直接去主仓就行。址在 README 顶部就能看到。需要深挖源码、提 issue、看贡献指南的直接去主仓就行。