📌 项目地址：webpack/webpack | ⭐ 65,904 颗星 | 🔧 JavaScript | 📜 未标注
webpack在GitHub上有65904颗星。这个数字放在2012年出生的JavaScript项目里，说明它在Rollup、esbuild、Vite相继出现后，依然有不可替代的位置。
README第一段话写得很直白：
Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
它把自己定义为模块打包器。重点不在“打包”，在“模块”。
安装命令暴露的边界
README给的安装方式：
npm install --save-dev webpack
或者用yarn：
yarn add webpack --dev
--save-dev说明了webpack的性质：它是构建期工具，不是运行时依赖。产物是静态文件，服务器上不需要装webpack。这个边界从安装命令就划清楚了。
三种模块格式，编译期统一处理
README列出了webpack支持的模块格式：ES Modules、CommonJS、AMD。括号里有个容易被忽视的词：“even combined”。
这三种格式可以混用。
我处理过一个内部系统，新代码用import，一个老的npm依赖用require，还有个多年前的插件用define。浏览器天生无法混用这三种语法。webpack在编译期把它们统一成自己的模块记录，运行时不留下痕迹。
这不是某个配置项开的功能，是模块解析机制本身的设计。
编译期解析依赖的收益
README原话：
Dependencies are resolved during compilation, reducing the runtime size.
依赖在编译期全部确定。没有被引用的代码不会进入产物，运行时不需要额外的模块系统，体积因此变小。
我试过把项目从单文件改成按路由拆chunk。公共依赖自动抽离，首屏体积小了很多，整个过程中没改业务代码，只改了配置。
Chunk是自动拆的，不是手工切的
README对chunk的表述：
Can create a single bundle or multiple chunks that are asynchronously loaded at runtime (to reduce initial loading time).
拆chunk是webpack根据依赖图自动决定怎么拆。异步路由组件抽成独立chunk，公共依赖抽成共享chunk，改动一个文件只重建受影响的模块。初始加载时间降下来，浏览器只在需要时拉取对应的chunk。
这正是webpack和很多工具拉开差距的地方。它不追最简单的配置，追的是复杂项目里还能理清的确定性。配置繁琐是事实，但边界清楚也是事实。
Loader管文件，Plugin管流程
README给的loader例子：TypeScript转JavaScript，Handlebars字符串编译成函数，图片转Base64。Loader的作用范围是文件内容——输入一个文件，输出转换后的内容，发生在模块解析阶段。
Plugin是另一个层面。README说：
Highly modular plugin system to do whatever else your application requires.
“whatever else”是个关键词。压缩输出、生成HTML、注入环境变量，这些loader碰不到的事归plugin管。
区分两者看权限级别：loader动文件内容，plugin干涉构建生命周期。
六万五千星背后的治理结构
README列了两套成员体系：TSC（Technical Steering Committee）和Core Collaborators。赞助层级从Premium Partners到Backers，项目挂在Open Collective上，同时是Linux Foundation项目。
这个治理结构对webpack的寿命起了实际作用。它不依赖某一个人的持续输出，而是靠委员会接收Pull Request、讨论RFC、管理版本发布来运转。迭代速度不快，兼容性策略稳定，不轻易破坏既有生态。对维护过大型webpack项目的人来说，这点很重要——升级依赖不需要追着新版跑，老配置还能用。
README还放了两个YouTube视频链接讲解webpack基础概念。一个叫Understanding Webpack，另一个也叫Understanding Webpack。
webpack的配置文件动辄上百行，学习曲线不平缓。但它把构建这件事拆成几个固定维度：loader管文件内容，plugin管流程，chunk管产物结构，依赖图管模块之间的关系。每个维度都能单独调，不至于为了改一个图片压缩策略去理解整个构建链。
65904颗星对应的是这个长期有效的设计。它不解决所有问题，但工程化构建里能提前解决的问题，它基本都在编译期替你处理掉了。