Webpack 中 Loaders 与 Plugins 的区别

[ChuChencheng]

Loaders

工作在文件层面，在打包工作进行之前执行。例如在编译一个文件时，遇到一个引入路径，比如 require 或 import 了一个 xxx.txt 文件，则在把这个 txt 文件打包之前会用配置对应的 loader 处理一遍。

Loaders 相对于 Plugins 是比较简单的，它只暴露一个函数给 Webpack ，且不会影响到构建过程

Plugins

插件（Plugins）则用于执行范围更广的任务，例如打包优化，资源管理，注入环境变量。一般工作在 bundle 层面或 chunk 层面，通常在打包工作的末尾执行。Plugins 可以影响到打包，能决定打包是如何生成的。

例如 html-webpack-plugin 插件可以生成 html 文件并注入打包中。

Plugins 相对于 Loaders 是较为复杂的，在 API 方面， Plugins 与 Webpack 集成度较高，可以注册内部的钩子，从而影响编译等构建过程

参考

• Webpack loaders vs plugins; what's the difference?
• Concepts | webpack