Webpack加载器与插件;有什么区别？

Question

webpack中的加载器和插件有什么区别？

documentation for plugins只是说：

  

使用插件添加通常与webpack中的bundle相关的功能。

我知道babel使用加载器进行jsx / es2015转换，但看起来像其他常见任务（例如copy-webpack-plugin）使用插件。

Answer 1

添加补充和简单的答案。

<强>装载机：

或

<强>插件：

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

举一个例子，您可以在下面的图片中清楚地看到装载机正在工作以及插件工作的位置 -

参考文献： Article和 Image

Answer 2

当您在代码中使用类似__new__的内容时，加载程序会对几乎任何文件格式进行预处理转换。与插件相比，它们非常简单，因为它们（a）只向webpack公开一个函数，（b）不能影响实际的构建过程。

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

Answer 3

webpack只是一个文件捆绑器。考虑到一个非常简单的场景（不拆分代码），这可能意味着（高级别）执行以下操作：

1. 找到入口文件并将其内容加载到内存中
2. 匹配内容中的某些文本并进行评估（例如@import）
3. 根据先前的评估结果找到依赖项，并对它们进行相同的操作
4. 将它们全部缝合在内存中
5. 将结果写入文件系统

当您仔细检查以上步骤时，这会与Java编译器（或任何编译器）的行为产生共鸣。当然有区别，但是对加载程序和插件的理解无关紧要。

---

装载机：

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

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

这些外部代码称为加载程序，它们通常在上述步骤1和3中运行。因此，由于这些装载机需要运行的阶段很明显，因此它们不需要挂钩，也不会影响构建过程（因为构建或捆绑只发生在第4步）。

因此，加载程序为编译做好了准备，并在某种程度上扩展了webpack编译器的灵活性。

---

插件：

之所以在这里，是因为即使webpack不能直接承诺变量输出，但全世界都希望得到它，而webpack确实允许它。

由于webpack的核心只是捆绑器，而这样做需要经历几个步骤和子步骤，因此可以利用这些步骤来构建附加功能。

生产构建过程（最小化并写入文件系统）是webpack编译器的本机功能，例如，可以将其视为其核心功能的扩展（这只是捆绑），并且可以像本机插件。如果他们不提供，其他人会做。

看看上面的本机插件，似乎webpack捆绑或编译可以分解为核心捆绑过程，还有很多我们可以关闭或自定义或扩展的本机插件过程。这意味着允许外部代码在他们可以选择的特定点（称为挂钩）加入绑定过程。

插件因此影响了输出，并某种程度上扩展了webpack编译器的功能。

Answer 4

装载程序在file level工作。他们可以编写模板，处理一些代码以根据您的方便进行翻译等。

插件在system level工作。它们可以处理模式，文件系统处理（名称，路径）等。