什么是webpack？webpack构建工具如何理解？webpack是干什么的？

webpack打包demo的git地址：https://github.com/OnionMister/webpack-demo.git

一、什么是webpack？

Webpack是前端资源的构建工具，也是静态模块打包器。

二、什么是构建工具

学过前端就知道，浏览器并不能识别所有的代码，例如sass、less以及ES6的语法等等，浏览器都是无法直接识别的，我们必须要通过一些工具或者包进行编译，把这些代码转换成浏览器能识别的代码。这一个个的编译小工具维护起来是非常麻烦的，尤其是当他们数量逐渐增多的时候。。。如下图

为了解决小工具越来越多的问题，所以前端提出了构建工具，用来统一的管理这些小工具。可以理解为：由一个大工具管理一堆小工具，而我们只需要管理大工具就可以了，webpack就是这个构建工具（大工具）的一种。

三、什么是静态模块打包器

我们在使用VUE、React做模块化开发的时候，会在一个文件引入许多依赖，包括：包、图片、样式等等，而这个些资源往往需要构建工具webpack进行处理，例如编译，这个时候这个文件就会成为构建工具webpack的入口文件。
webpack通过入口文件记录的依赖资源形成一棵依赖树状结构图。根据结构图依次引入依赖，形成chunk代码块，chunk经过webpack管理的各项小工具进行处理，处理结束后最终形成的包叫bundle静态资源。如下图：

四、概括

webpack将前端所有的资源（img/scss/less/js/json/…）看作模块，然后根据各个模块之间的关系进行分析，打包生成静态资源包（bundle）