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

Question

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

javascriptreactjswebpack

142

Webpack中loader和plugin有什么区别?

插件文档中只是说:

使用插件通常与webpack中的捆绑相关功能。

我知道babel使用loader进行jsx/es2015转换，但其他常见任务（例如copy-webpack-plugin）似乎使用插件而不是loader。

- Tim Perkins

3

加载器将文件转换为可识别的 JS 代码(并在转换过程中执行一些操作)，插件可以在加载器输出上执行任何需要的操作。 - David Guan

4个回答

85

当你在代码中使用 require("my-loader!./my-awesome-module") 时，加载器可以对几乎任何文件格式进行预处理转换。与插件相比，它们更为简单，因为它们(a)只向webpack暴露一个单一的函数，(b)不能影响实际的构建过程。

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

- helt

为什么加载器不能与Webpack深度集成？ - Nitin .

@NitinTyagi 因为这是插件的工作。加载器的目的是保持简单。 - helt

42

在本质上，webpack只是一个文件打包工具。考虑一个非常简单的场景（没有代码分割），这可能只意味着以下高层次操作：

查找入口文件并将其内容加载到内存中
匹配内容中的某些文本并对其进行评估（例如@import）
根据先前的评估查找依赖项并对它们执行相同的操作
将它们全部缝合成内存中的一个包
将结果写入文件系统

当您仔细检查上述步骤时，这与Java编译器（或任何编译器）所做的事情相符。当然，存在差异，但这些不影响理解加载器和插件。

加载器：

由于webpack承诺捆绑任何文件类型，因此需要加载器。

由于webpack在本质上只能够捆绑js文件，因此该承诺意味着webpack核心团队必须纳入构建流程，以允许外部代码以webpack可以消费的方式转换特定的文件类型。

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

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

插件：

尽管webpack并没有直接承诺可变输出，但人们需要它，而webpack也允许这样做。

由于webpack本质上只是一个捆绑器，但在执行此操作时经过了多个步骤和子步骤，因此可以利用这些步骤来构建其他功能。

例如，生产构建过程（缩小并写入文件系统）是webpack编译器的本机功能，可以将其视为其核心能力（即捆绑）的扩展，并像本机插件一样处理。如果他们没有提供它，其他人就会提供。

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

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

- supi

2

很棒的答案，真的描绘了一个生动的画面。 - Robotronx

1

我真的很喜欢这个答案。它给了你一些解释，让你能够推理。不仅是定义，还有背后的洞察力。 - Dazag

5

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

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

- Webwoman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WitVault · Accepted Answer

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

加载器：

加载器在文件级别在或者之前生成包时工作。

插件：

插件在包或块级别上工作，通常在包生成过程的末尾工作。插件还可以修改创建包的方式。插件比加载器具有更强大的控制能力。

仅以下面的图示为例，您可以清楚地看到加载器在哪里工作，插件在哪里工作-

参考资料：文章和图片