第 148 题： webpack 中 loader 和 plugin 的区别是什么

Question

webpack 是一款强大的模块打包工具,它可以引入配置文件完成前端高度定制化的构建工作。

webpack 默认只能理解 JavaScript 和 JSON 文件，但实际工作中各种需求层出不穷，文件类型也多种多样，比如 .vue、.ts、图片、.css 等,这就需要 loader 增强 webpack 处理文件的能力。

Answer 1

loader:让webpack能够处理非js文件(自身职能理解js)，然后你就可以利用 webpack 的打包能力，对它们进行处理。
例如：css-loader、style-loader、postcss-loader、sass-loader

plugins:从打包优化和压缩，一直到重新定义环境中的变量.
例如：uglify-webpack-plugin、clean-webpack-plugin、babel-polyfill

Answer 2

通俗点讲loader是转换，plugin是执行比转换更复杂的任务，比如合并压缩等

Answer 3

loader是翻译官，plugin是干活滴

Answer 4

webpack 是由nodejs编写的前端资源加载/打包工具，由nodejs提供了强大的文件处理，IO能力。
loader: 是一个nodejs 函数模块， 传入resource file 或者sourceMap json 结果，读取文件，将文件处理为String 或者 Buffer 格式，然后传给compiler 或者下一个loader.
plugin: 是能够参与到compilation process的自定义函数，通过hook到每一个编译（compiler）中，触发关键事件或处理。

如何自定义webpack插件：

• JavaScript 命名函数
• 在插件函数prototype 上定义一个apply 方法
• 定义一个绑定到webpack 自身的hook
• 处理webpack内部特定数据
• 功能完成后调用webpack 提供的回调

Answer 5

一、webpack的打包原理

1. 识别入口文件
2. 通过逐层识别模块依赖(Commonjs、amd或者es6的import，webpack都会对其进行分析，来获取代码的依赖)
3. webpack做的就是分析代码，转换代码，编译代码，输出代码
4. 最终形成打包后的代码

二、什么是loader

loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中

1. 处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行

2. 第一个执行的loader接收源文件内容作为参数，其它loader接收前一个执行的loader的返回值作为参数，最后执行的loader会返回此模块的JavaScript源码

三、什么是plugin

在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。

四、loader和plugin的区别

对于loader，它是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss转换为A.css，单纯的文件转换过程

plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务

Answer 6

个人理解：
1.loader针对的是项目最终输出的代码文件或资源文件。例如：通过less-loader、babel-loader等，它们都是将我们项目源码中的一些浏览器不支持代码转换成浏览器能够支持的代码。

2. plugins针对的是工程层面，或是整个项目层面。它往往和源码无关，用来扩展工程、或者优化工程。

loader针对代码或资源，plugins针对工程。

Answer 7

Loaders:

Loaders work at the individual file level during or before the bundle is generated.

Plugins:

Plugins work at bundle or chunk level and usually work at the end of the bundle generation process. Plugins can also modify how the bundles themselves are created. Plugins have more powerful control than loaders.

Just for an example you can clearly see in below image where loaders are working and where plugins are working -

Reference

• https://stackoverflow.com/a/46176755/7552246

Answer 8

loader支持除js、json以外的文件，并且将他们转换成有效的模块，加入到依赖图中。本质是一个函数，接受的文件为参数，返回转换结果。执行顺序是从右到左。

plugin用于优化bundle文件的优化，资源增强和变量注入。loader不能做的都由它来实现，以此增强webpack的功能。plugin作用于整个过程

Answer 9

loader：webpack自身只支持js和json这两种格式的文件，对于其他文件需要通过loader将其转换为commonJS规范的文件后，webpack才能解析到
plugin：是用于在webpack打包编译过程里，在对应的事件节点里执行自定义操作，比如资源管理、bundle文件优化等操作

Answer 10

loader，它是一个转换器，将A文件进行编译成B文件，比如：将A.less转换为A.css，单纯的文件转换过程。

plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务

Answer 11

loader一般是将某个语法统一处理为统一的语法
plugin一般是在打包前或打包后对结果进行再次操作

Answer 12

这里引用官方文档原文：

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

相对于loader转换指定类型的模块功能，plugins能够被用于执行更广泛的任务比如打包优化、文件管理、环境注入等……