JavaScript模块打包是将多个JS及非JS资源按依赖合并转换优化为少量浏览器可运行文件的过程；它解决ES6模块的局限性，支持Loader/Plugin扩展、代码分割、Tree Shaking等工程化能力。
JavaScript模块打包，就是把多个JS文件（可能还有CSS、图片等资源）按依赖关系合并、转换、优化，最终生成浏览器能直接运行的少量静态文件的过程。
浏览器原生不支持现代模块语法
虽然现在ES6的import/export已被主流浏览器支持，但仍有明显限制：无法处理非JS资源（如.scss、.png）、不支持代码分割、缺少热更新、不能兼容旧版浏览器、也无法做Tree Shaking（自动剔除未使用代码）。这些都不是靠加个type="module"就能解决的。
项目变大后，手动管理依赖和加载顺序很麻烦
当一个项目有几十个模块、多种资源类型、不同环境配置时，靠
Webpack提供了一套可扩展的“编译流水线”
它把资源看作模块——JS、CSS、字体、SVG甚至JSON都能成为模块节点。通过配置loader（如babel-loader、css-loader）和plugin（如HtmlWebpackPlugin、SplitChunksPlugin），你可以精确控制每个环节：
在整本书中我们所涉及许多的Flex框架源码，但为了简洁，我们不总是显示所指的代码。当你阅读这本书时，要求你打开Flex Builder，或能够访问Flex3框架的源码，跟随着我们所讨论源码是怎么工作及为什么这样做。 如果你跟着阅读源码，请注意，我们经常跳过功能或者具体的代码，以便我们可以对应当前的主题。这样能防止我们远离当前的主题，主要是讲解代码的微妙之处。这并不是说那些代码的作用不重要，而是那些代码处理特别的案例，防止潜在的错误或在生命周期的后面来处理，只是我们当前没有讨论它。有需要的朋友可以下载看看
立即学习“Java免费学习笔记（深入）”；
- 用Babel转译新语法，兼容老浏览器
- 把Sass编译成CSS，再自动注入页面或提取为独立文件
- 给图片小于10KB的转成base64内联，大的则输出为单独文件并返回路径
- 分析依赖图，拆出vendor包和业务代码，利用浏览器缓存提升二次加载速度
不只是打包，更是前端工程化的基础设施
Webpack本身不是目的，而是支撑Dev Server（本地服务+热更新）、Source Map（错误精准定位）、Code Splitting（按需加载）、长期缓存（contenthash）、多环境构建（mode: 'development' / 'production'）等能力的底层核心。没有它，现代前端协作开发、CI/CD、性能优化都很难系统化落地。
