超好理解的webpack入门

农田灌溉系统是一个很好的比喻，可以帮助我们更好地理解webpack的概念。我们可以将整个系统分为三个部分：

入口:

入口就相当于农田灌溉系统的水源。在农田灌溉系统中，水源是指水库、水塘或井。在Webpack中，入口是定义应用程序的起点。我们告诉webpack从哪一个文件开始构建它的内部依赖图，并编译和捆绑成可执行的某个文件。

依赖:

首先，我们需要了解webpack的核心概念——“依赖”。在Webpack中，每个模块都由javascript编写，这些代码之间存在相互依赖关系。依赖图表依据这种关系组装各个模块进入javascript包(bundle)。就像农田灌溉系统中管道和渠道一样，形成了一个复杂的网络结构，在这个网络结构中，依赖图谱表示了模块之间的所有依赖关系。

Loader和Plugin:

到目前为止，我们介绍了Webpack的两个最基本的概念：入口和依赖。但是，主要的难题在于Webpack是如何处理不同类型的文件的。在农田灌溉系统中，我们需要对水进行净化、输送和分配。类似的，在Webpack中，我们还需要将各种资源(图片、css等)处理成浏览器可识别的标准语言以及去除无用代码，这就引出了Webpack的_loader_和_plugin。

Loader:

Loader就像一台净水器,将其他不是水的资源都转化成水的形式,能够把输入的源文件转换为JS/CSS/HTML等格式，以便webpack可以将它们添加到依赖图谱中。通过使用loader，我们可以实现ES6转ES5、Less/Sass转CSS、Typescript转Javascript等功能。

Plugin:

插件就像灌溉系统中增加的大水池，木桶，滴灌器等等，是一个具有广泛功能的工具。通过增强Webpack的构建过程，插件可以完成许多任务，例如资源优化，压缩混淆，生成静态页面等等。如果我们的应用超过了20个页面以上，那么手动创建页面将可能非常冗长、耗时且枯燥。而插件的出现则使得我们可以自动化地、数秒钟内就能创建出数十个页面，并且各页面均保持风格的统一。

总结

webpack就像一个灌溉系统的角色，可以将入口作为水源，然后根据依赖关系建立一张庞大的依赖关系图谱，以确保各个模块的有效处理和打包。而 Loader 和 Plugin 相当于扩展设备，为系统增加了更多的能力，如增加引入新工具，任务优化等等。