Webpack是什么？

背景

webpack的作者是德国纽伦堡Tobias Koppers,   webpack的诞生之初主要是想解决代码的拆分问题。这也是webpack这么受欢迎的原因所在。同时也离不开500多位开源贡献者。

解释

webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 _bundle_。

这是官方文档给出的webpack的解释，这里我提取几个关键词理解。

理解模块

模块,又称构件,是能够单独命名并独立地完成一定功能的程序语句的集合（即程序代码和数据结构的集合体）。它具有两个基本的特征：外部特征和内部特征。外部特征是指模块跟外部环境联系的接口（即其他模块或程序调用该模块的方式，包括有输入输出参数、引用的全局变量）和模块的功能；内部特征是指模块的内部环境具有的特点（即该模块的局部数据和程序代码）。

以上是百度百科给模块的定义，前端模块化一般指javascript的模块，最常见的模块就是npm包。每一个模块可能是最小甚至是最优的代码组合。

静态模块打包工具

将javascript代码、与其他静态文件组成的不同模块，进行分析、解析压缩打包成浏览器可识别的代码的过程。

依赖图（dependency graph）

任何时候，一个文件依赖于另一个文件，webpack 就把此视为文件之间有_ 依赖关系_。webpack从命令行或配置文件定义的一个模块列表开始，处理你的应用程序；从入口开始webpack递归的构建一个依赖图，这个依赖图包含着应用程序中所需的每个模块，然后将这些模块打包成少量的bubdle,使浏览器可以执行。

通过上图能够简单理解，webpack就像一个黑盒子，通过这个黑盒子的模块（js、ts、png、sass等），将最终转化成浏览器可识别的文件。

Webpack能做什么？

代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布

参考：
百度百科模块定义
官网给出的模块解释
官网依赖图解释