webpack入门级理解

Posted 2021-09-07 炸鸡排我们走

1.为什么需要使用打包工具

前端在开发时没法避免的会写出多个js文件，并且它们相互之间有着复杂的依赖关系，如果这个时候直接发版到线上，浏览器每遇到一个js文件的时候都会发起http请求来获取资源，然后依此执行其中的代码。如果其中一个文件因为网络问题延迟了，那么整个页面的显示也会被延误，显然对用户而言这是不友好的。

这个时候我们会想，如果只生成一个js文件就好了，这样的话减少了http的请求，页面的展示会更加流畅。但是这对开发者来说很不友好，这个被集合的js文件可能会存在成千上万行代码，前期开发和后期维护都是个大工程。

所以webpack打包工具的作用就凸现出来了，他的核心定位就是静态模块打包器，笼统来讲，它会帮我们在开发完成后合并我们的js文件。这样既减少了浏览器的http请求次数，又让我们的开发过程不受影响。

2.webpack在打包过程中具体干了什么

首先，我们要知道的是webpack只干了一件大事儿：递归构建了一个依赖关系图，并打包生成了一个或多个bundle。

具体拆分下大致可分为以下七个步骤：

graph TD
1.初始化参数 --> 2.开始编译  --> 3.确定入口 --> 4.编译模块 --> 5.完成模块编译 --> 6.输出资源 --> 7.输出完成 

1. 初始化参数：从配置文件和shell语句中读取并合并参数，得出最终的参数。
2. 开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法，开始编译。
3. 确定入口：根据配置中的entry找到所有的入口文件。
4. 编译模块：从入口文件出发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤，直到所有入口依赖的文件都经过了本步骤的处理。
5. 完成模块编译：在经过第四步使用loader翻译完所有模块后，得到了每个模块被翻译后的最终内容，以及他们之间的依赖关系。
6. 输出资源：根据入口和模块的依赖关系，组装成一个个包含多个模块的chunk,再把每个chunk转换成一个单独的文件输出到列表，这步是可以修改输出内容的最后机会。
7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

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的范围包括从打包优化压缩，一直到重新定义环境中的变量。