加载程序是WebPack包装过程中非常重要的一部分。通过了解加载程序的执行过程，您不仅可以学习很多设计思想，而且可以在将来遇到WebPack配置的问题。
加载程序本质上是一个函数，接收文件内容，处理后返回源代码，以下是一个简单的加载程序示例
以上意识到一个简单的装载机，看起来很简单。贝洛（Below）更加困难。
当我们配置它时，我们将在遇到时用JS脚本替换原始内容，并将样式代码插入标签
尽管实现加载程序很容易，但应注意，WebPack中的加载程序可以分为以下类型：
执行上述加载程序的执行。也就是说，让我们先查看一个示例。
该代码包含两个文件，并在导入时使用。我们不在乎如何编写各种装载机。
以下代码配置了其他三个加载程序
在上面的配置中需要注意的点
查看运行结果
通过上面的示例，我们通常了解加载程序的执行顺序，每个人都会首先印象深刻。看到。例如，当Vue编译时，有一个很长的字符串：
上述内容实际上可以分为四个部分
实际上，它由装载机分开，例如
那么这个前缀是什么？实际上，有很多前缀的方法：webpack中文文档
- ！nopreautoloaders，不喜欢和普通的装载机！Noautoloaders，不要普通的装载机！noprepostautoloaders其他装载机不想要它。只要内联合装载机在正面添加前缀，加载程序就不会执行它，因此内部联合的内部更加灵活。不建议在每日项目中使用，不建议这样做
实际上，为了实现加载程序的功能，WebPack分别开发了一个加载程序执行器，即Loader-Runnner.LET在下面查看一个简单的示例
执行运行加载程序后，将获得文件的最终内容。执行上述示例后，以下过程将传递以下过程（注意：Enforc的PER和POST配置是WebPack本身制定的规则。Runloaders仅负责对执行）
音高和正常执行顺序是完全相反的，音高会首先执行
查看上面的加载程序执行过程，每个人都可能更困惑。
当文件由加载程序处理时，将首先执行音调并打印以下内容
测试一个开始时的下一个示例，将打印以下内容
当音调返回值时，它将跳过后面的执行
我们的音高功能返回了非散布测试：
可以看出，加载程序仅执行，并且不会执行其加载程序。返回值，代理的参数（每个人都注意下面的红色箭头）
让我们回到上一个示例
每个人都会找到一个属性，那是什么？让我们在下面举一个简单的示例
上面的代码，我们调用获取一种方法，此方法允许我们在加载程序中实现它。
加载程序上下文是什么？简而言之，加载程序的此方面有许多变量和功能，这可以促进我们获取需要处理的文件或处理异步的文件内容。原理也很简单。
实际上，加载程序上下文的属性可以分为上下文属性和上下文属性。您是什么意思？除了WebPack构造工具外，如果我们只使用它，它将包括以下这些上下文属性。
早些时候，我们知道，当执行该方法时，可以传输一个方法，并最终将与构建的 - 上下文学属性合并。LET会查看WebPack的源代码。
LoaderContext源代码如下
从上面的代码中，您可以知道您可以轻松获得LoaderContext，并且
此外，关于WebPack中的属性用法，每个人都可以看到
WebPack中文文档
用法是在早期引入的，最好在热量时获得一波，这也非常简单。让我们看一下整体流程图
在意识到之前，让我们回顾下一次用法
让我们首先意识到初始化逻辑
在上面的代码中，我主要做一些事情
让我们详细了解实施
上面的代码主要执行这些事情
实现相对简单，但是某些回调方法已安装在顶部。，它将开始迭代
在阅读了Iteratchitchingloader的实现后，实际上，每个人都可以猜测该方法的实现。实际上，这是迭代的。
以上是执行过程，是否非常简单?，源代码已放在github中
下一篇文章，我将根据本文内容分析VUE-Loader源代码。请期待
原始：https：//juejin.cn/post/7095305079720247304