Webpack 加载器和插件，有什么区别？

当您在代码中使用诸如 require("my-loader!./my-awesome-module")之类的东西时，加载程序会对几乎任何文件格式进行预处理转换。与插件相比，它们非常简单，因为它们(a)只向 webpack 公开一个函数，(b)不能影响实际的构建过程。

另一方面，插件可以深入集成到 webpack 中，因为它们可以在 webpack 构建系统中注册钩子，并访问(和修改)编译器，以及编译器的工作方式。因此，它们更强大，但也更难维护。

添加补充和更简单的答案。

装载机:

加载程序在单个文件级别 期间或 之前上工作，生成 捆绑。

插件:

插件在 捆绑或 大块头级别工作，通常在包生成过程的 结束级别工作。插件还可以修改包本身的创建方式。插件比加载程序具有更强大的控制能力。

只是举个例子，你可以清楚地看到在下面的图片哪里加载器正在工作，哪里插件正在工作-

参考文献: 第 及 形象

装载机工作在 文件级别。他们可以编写模板，处理一些代码来传输它取决于您的方便，等等。

插件工作在 系统水平，它们可以处理模式、文件系统处理(名称、路径)等。

在其核心，webpack 只是一个文件包。考虑到一个非常简单的场景(没有代码分裂) ，这可能意味着只有以下操作(在高级别上) :

1. 找到条目文件并将其内容加载到内存中
2. 匹配内容中的某些文本并对其进行评估(例如@import)
3. 根据以前的计算找到依赖项，并对它们执行相同的操作
4. 把它们都编织成一个包裹在记忆里
5. 将结果写入文件系统

当您仔细检查上述步骤时，会发现这与 Java 编译器(或任何编译器)的工作有共鸣。当然也有不同之处，但是这些对于理解加载程序和插件来说并不重要。

装载机:

是因为 webpack 承诺将任何文件类型捆绑在一起。

由于 webpack 的核心只能捆绑 js 文件，这意味着 webpack 核心团队必须整合构建流程，允许外部代码以 webpack 可以使用的方式转换特定的文件类型。

这些外部代码称为加载程序，它们通常在上面的步骤1和步骤3中运行。因此，由于这些加载程序需要运行的阶段是显而易见的，所以它们不需要钩子，也不影响构建过程(因为构建或绑定只发生在步骤4)。

所以加载器为编译做好了准备，它们在某种程度上扩展了 webpack 编译器的灵活性。

插件:

是因为即使 webpack 没有直接承诺变量输出，世界需要它，而且 webpack 允许它。

由于 webpack 的核心只是一个捆绑包，并且还要经过几个步骤和子步骤，因此可以利用这些步骤来构建额外的功能。

生产构建过程(缩小并写入文件系统)是 webpack 编译器的本地功能，例如，可以被视为其核心功能的扩展(只是捆绑) ，可以被视为本地插件。如果他们没有提供，其他人也会这么做的。

看看上面的本地插件，似乎 webpack 捆绑或编译可以分解为核心捆绑过程，加上许多本地插件过程，我们可以关闭或定制或扩展。这意味着允许外部代码在它们可以选择的特定点(称为钩子)加入捆绑过程。

插件因此影响了 webpack 编译器的输出和扩展性能。