Webpack

一、官方网址

Webpack 官网：https://webpack.js.org ，开源免费，文档完善，中文社区资料丰富。

二、核心功能

1. 模块打包：将 ES Module、CommonJS 等模块及其依赖图打包为浏览器可用产物。
2. Loader 机制：通过 loader 转换任意资源（TS、Sass、图片等）为可打包模块。
3. 插件体系：HtmlWebpackPlugin 等海量插件覆盖构建各环节。
4. 代码分割：支持动态导入与分包策略，优化首屏加载性能。
5. 热模块替换：开发环境下模块热更新，保持应用状态的同时刷新代码。
6. Tree Shaking：基于静态分析剔除未使用代码，减小产物体积。

三、适用场景

• 中大型单页应用与复杂前端工程构建。
• 需要精细控制打包策略的企业级项目。
• 老项目维护与渐进式升级。
• 组件库、SDK 的库模式构建。

四、使用优势

• 生态极其成熟，几乎任何需求都有现成方案。
• 可配置性强，能精细优化构建产物。
• 社区庞大，遇到问题容易找到解决方案。
• 长期维护稳定，大量生产项目验证可靠。

五、注意事项

• 配置复杂度较高，建议从官方指南入手循序渐进。
• 大型项目冷启动较慢，可配合缓存与 esbuild/swc loader 提速。
• 新项目可评估 Vite 等现代方案，Webpack 更适合存量与复杂定制场景。