「这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战」
1 webpack 是什么
webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具（module bundler）
这是官方文档的解释，那到底是什么意思呢？我们从以下三个名词进行解释：打包、静态资源、模块
1.1 打包
以一个html页面举例来说
<html>
<body>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
</body>
</html>
这个html页面通过script标签引入了3个JavaScript文件，并且它们之间有一定的依赖关系，比如c.js依赖于b.js，b.js依赖于a.js
因为有3个js文件，所以浏览器需要发送3次http请求来获取这个3个文件，并且一个文件由于网络而延迟加载会影响整个页面的显示。这还只是3个js文件，对于一个大型项目来说，如果js的数量增加到几十个甚至上百个，那么延时问题会变得相当严重。
那怎么解决这个问题呢？很简单，把所有相互依赖的js文件合并成一个js文件就好了。这样只需要发送1次请求就能加载这个js文件，大大加快了页面的加载速度。
但是问题又来了，对于一个由几十个甚至上百个js文件合并而成的js文件，其代码量及代码复杂程度是难以想象的，这样的代码是无法维护的。
所以在开发阶段，我们仍旧是将代码分开成一个个小的js文件，有助于开发和维护。在开发完成以后，由webpack来将这些js文件合并成一个文件，这个合并的过程就叫做打包。
当然webpack支持多种类型的文件的打包，包括js、css、jpg等
1.2 静态资源
所谓静态资源，就是在开发阶段，可以被直接引用的资源
相对地，所谓动态资源，就是项目上线之后，浏览器在运行时才能动态获取的文件，它不能在开发阶段被直接引用
1.3 模块
JavaScript在早期的设计中没有模块、包、类的概念，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化
2.1中所述的3个js文件就是3个模块，所谓模块就是一个实现特定功能的文件，他可以被其他模块引用
1.4 总结
理解了上述3个概念，就可以大概理解何为静态模块打包工具
简单说来，就是一个复杂的项目在开发阶段，会被拆分成一个个具有独立功能的静态资源模块，而webpack这个工具会在项目开发完成后将这些独立的模块组织、打包到一起，然后项目才能上线发布
另外，值得一提的是，webpack在打包过程中，会在内部构建一个依赖关系图，这个依赖图对应映射到项目所需的每个模块。所谓的依赖关系图就是webpack根据每个模块之间的依赖关系递归生成的一张内部逻辑图，有了这张依赖关系图，webpack就能把所有需要的模块打包成一个文件了，这个文件称为bundle文件（bundle的中文意思就是包）
2 webpack 的5个核心概念
2.1 入口 Entry
入口指示webpack以哪个文件为入口起点开始打包
2.2 输出 Output
输出指示webpack打包后的文件的输出路径以及命名
2.3 Loader
Loader帮助webpack处理非JavaScript文件（webpack自身只能处理JavaScript）
2.4 插件 Plugins
插件可以让webpack能处理更多任务，插件的范围包括：打包优化、压缩、重新定义环境中的变量等
2.5 模式 Mode
模式指示webpack使用相应模式的配置，包括development（开发模式）和production（生产模式）
