大家好，今天我分析装载机和插件
可以看出，在运行时间两者之间的差异：
让我们看一下装载机和插件实现的原理
帮助WebPack将不同类型的文件转换为WEEBPACK识别模块。
例如：
它接受要处理为参数的源代码和过渡后的输出JS代码。
该方法更灵活，因为它允许传递多个参数，而不仅仅是传递多个参数。
由于同步计算太时了 - 耗尽，因此在单个线程环境（例如node.js）中，此操作不是一个好的解决方案。我们建议您的装载机尽可能短。但是，如果计算量很小，同步装载机也是可能的。
默认情况下，资源文件将转换为UTF-8字符串，然后将其传递到Loader。通过将原始设置为True，Loader可以接收原始缓冲区。
WebPack将首先从从左到右（如果有）在加载程序链中的每个加载程序上执行螺距方法，然后从右向左执行加载程序链中的每个加载程序上的普通加载器方法。
在此过程中，如果任何音高具有返回值，则将加载器链被阻止。WebPack将跳过所有后续的音高和加载程序，并直接进入最后一个加载程序。
this.async异步回调loader.return this.callback const coldback = this.async（）this.callback可以同步或放纵，以及函数this.callback（err，conterg，content，contemcemap？）this.getOption（schemam）绝对路径this.utils.absolutify（上下文，请求）更多文档，请参阅WebPack官方加载程序API文档
功能：用于清理JS代码
角色：将文本注释添加到JS代码
函数：将JS代码和编译ES6+语法编译到ES5-Syntax中。
功能：输出文件原始
功能：动态创建样式标签，将样式代码插入JS以使样式生效。
通过插件，我们可以扩展WebPack，添加自定义构造行为，以便WebPack可以执行更广泛的任务并具有更强的建筑功能。
Webpack就像一条生产线。经过一系列处理过程后，可以将源文件转换为输出结果。该生产线上每个处理过程的职责是单个的，并且在多个过程之间存在依赖性。只有在完成当前处理后，才可以将其移交给下一个过程来处理它。插件 - 就像插入生产线中的功能，该功能在特定时间在生产线上的资源进行处理。Webpack。通过Tapable.Webpack将在操作期间播放事件。插件 - 仅需要聆听其关心的事件，您可以加入此生产线以更改生产线的操作。WebPack事件流量机制可确保插头的顺序 - 使整个系统可伸缩性好。——“短-up webpack”
从代码逻辑的角度来看：WebPack将在编译代码过程中触发一系列挂钩事件。插件的作用是找到相应的钩子并挂起您自己的任务，即注册事件。这样，当webpack构造时，将用钩子的触发器执行插头的事件。
钩子的本质是：事件。为了促进我们的直接干预和控制汇编过程，webpack封装了在编译过程中触发的各种关键事件以公开事件接口。这些接口非常生动地称为：（挂钩）。开发插头，不能与这些钩子分开。
为WebPack提供统一的插头接口（Hook）类型定义，该定义是WebPack的核心功能库。当前有十种webpack类型。您可以在源代码中看到。他们是：
它还暴露了三种方法来插入 - 注入不同类型的自定义构造行为：
编译器对象保持完整的WebPack环境配置。每次我们启动WebPack构造时，它都是一个独特的对象，只能创建一次。
当我们首次启动WebPack时，将创建此对象。我们可以通过编译器对象（例如加载程序，插件和其他配置信息）访问WebAPCK的主要环境配置。
它具有以下主要属性：
编译器挂钩文档
编译对象代表资源构建，并且编译实例可以访问所有模块及其依赖性。
汇编对象编译了依赖项中的所有模块。在编译阶段，模块加载，密封，优化，块，哈希和重新启动（还原）。
它具有以下主要属性：
汇编挂钩文档
通过调试查看和对象数据。
目前，控制台输出以下内容：
此时，控制台将显示一个绿色图标
原始：https：//juejin.cn/post/7103698199453368357开发思想：