1.为什么须要应用打包工具
前端在开发时没法防止的会写出多个js文件，并且它们相互之间有着简单的依赖关系，如果这个时候间接发版到线上，浏览器每遇到一个js文件的时候都会发动http申请来获取资源，而后依此执行其中的代码。如果其中一个文件因为网络问题提早了，那么整个页面的显示也会被延误，显然对用户而言这是不敌对的。
这个时候咱们会想，如果只生成一个js文件就好了，这样的话缩小了http的申请，页面的展示会更加晦涩。然而这对开发者来说很不敌对，这个被汇合的js文件可能会存在成千上万行代码，后期开发和前期保护都是个大工程。
所以webpack打包工具的作用就凸现进去了，他的外围定位就是动态模块打包器，抽象来讲，它会帮咱们在开发实现后合并咱们的js文件。这样既缩小了浏览器的http申请次数，又让咱们的开发过程不受影响。
2.webpack在打包过程中具体干了什么
首先，咱们要晓得的是webpack只干了一件大事儿：递归构建了一个依赖关系图，并打包生成了一个或多个bundle。
具体拆分下大抵可分为以下七个步骤：
graph TD1.初始化参数 --> 2.开始编译 --> 3.确定入口 --> 4.编译模块 --> 5.实现模块编译 --> 6.输入资源 --> 7.输入实现 - 初始化参数：从配置文件和shell语句中读取并合并参数，得出最终的参数。
- 开始编译：用上一步失去的参数初始化Compiler对象，加载所有配置的插件，执行对象的run办法，开始编译。
- 确定入口：依据配置中的entry找到所有的入口文件。
- 编译模块：从入口文件登程，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤，直到所有入口依赖的文件都通过了本步骤的解决。
- 实现模块编译：在通过第四步应用loader翻译完所有模块后，失去了每个模块被翻译后的最终内容，以及他们之间的依赖关系。
- 输入资源：依据入口和模块的依赖关系，组装成一个个蕴含多个模块的chunk,再把每个chunk转换成一个独自的文件输入到列表，这步是能够批改输入内容的最初机会。
- 输入实现：在确定好输入内容后，依据配置确定输入的门路和文件名，把文件内容写入到文件系统。
3.常说的chunk和bundle区别是什么？
1.chunk
chunk是webpack打包过程中modules的汇合，是打包过程中的概念。
webpack的打包是从一个入口文件开始，入口模块引入其余模块，模块再援用模块。webpack通过援用关系一一打包模块，这些module就造成了一个chunk。当然如果有多个入口模块，可能会产出多条打包门路，每条门路都会生成一个chunk.
2.bundle
bundle是打包实现后最终输入的一个或者多个文件。
一句话总结
chunk是打包过程中的代码块，bundle是打包后果输入的代码块，chunk在构建实现后就出现为bundle。
4.webpack中一些重要概念
1.compiler
一句话形容：简略了解为webpack实例
这个对象在webpack启动时被实例化，是全局惟一的。compiler对蕴含了webpack环境所有的配置信息，蕴含options，loaders,plugins等信息。
2.compilation
compilation蕴含了以后的模块资源，编译生成资源，变动的文件等。当webpack以开发模式运行时，每当检测到一个文件的变动，一次新的compilation就会被创立。compilation对象也提供很多事件回调供插件做扩大。通过这个compilation也能够拜访到compiler对象。
3.loader
一句话形容：模块转换器，将非js模块转换为webpack可辨认的js模块。
loader能够将所有类型的文件转换为webpack可能解决的模块，而后能够利用webpack的打包能力，对它们进行解决。实质上webpack loader将所有类型的文件，转换为应用程序的依赖图。
4.plugin
一句话形容：扩大插件。
在webpack运行的各个阶段都会播送进来相应的事件，插件能够监听到这些事件的产生，在特定的机会做相应的解决。
loader被用于转换某些类型的模块，而插件则可执行范畴更广的工作。plugin的范畴包含从打包优化压缩，始终到从新定义环境中的变量。