Webpack 加载器与插件；有什么不同？答案

【问题标题】：Webpack loaders vs plugins; what's the difference?Webpack 加载器与插件；有什么不同？
【发布时间】：2016-09-23 23:00:58
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

加载器：

加载器在期间或在生成包之前在单个文件级别工作。

插件：

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

仅举个例子，您可以在下图中清楚地看到加载程序在哪里工作以及插件在哪里工作 -

参考： Article 和 Image

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

当您仔细检查上述步骤时，这与 Java 编译器（或任何编译器）的工作产生了共鸣。当然存在差异，但这些对于理解加载器和插件并不重要。

装载机：

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

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

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

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

插件：

出现在这里是因为即使 webpack 不直接承诺变量输出，世界都需要它并且 webpack 确实允许它。

由于 webpack 的核心只是一个打包器，但在此过程中需要经过几个步骤和子步骤，因此可以利用这些步骤来构建额外的功能。

生产构建过程（压缩并写入文件系统），这是 webpack 编译器的原生能力，例如，可以被视为其核心能力的扩展（只是捆绑），可以被视为本机插件。如果他们不提供，其他人就会这样做。

看上面的原生插件，看起来好像webpack打包或编译可以分解成核心打包过程，加上很多我们可以关闭或自定义或扩展的原生插件过程。这意味着允许外部代码在可以选择的特定点（称为钩子）加入捆绑过程。

因此，插件会影响 webpack 编译器的输出和扩展能力。

【讨论】：

【解决方案4】：

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

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

【讨论】：