Webpack加载器与插件; 有什么不同？

Question

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

插件的文档只是说:

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

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

Answer 1

增加补充和简单的答案.

装载机:

装载机在单个文件级别工作期间或之前的束产生.

插件:

插件在bundle或chunk级别工作,通常在bundle生成过程结束时工作.插件还可以修改捆绑包本身的创建方式.插件比装载器具有更强大的控制能力.

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

参考文献: 文章和图像

Answer 2

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

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

Answer 3

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

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

装载机：

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

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

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

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

外挂程式：

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

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

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

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

因此，插件会影响输出，并会扩展Webpack编译器的功能。

Answer 4

加载器在文件级别工作。他们可以编写模板，根据您的方便处理一些代码以进行转换等。

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