前言
在前面的文章中，我们已经学习了 Webpack 的核心概念以及其工作原理，了解了如何通过配置文件进行打包。本文我们将深入学习 Webpack 中的 loaders 与 plugins，以及如何编写自己的 loaders 和 plugins。
Loaders
在 Webpack 中，Loaders 用于对模块的源代码进行预处理，然后将处理后的代码交给 Webpack 进行打包。Loaders 可以将不同格式的文件转化为 Webpack 模块，比如将 ES6 转换为 ES5，将 Sass 文件转换为 CSS 文件等。
使用方式
Webpack 的配置文件中，可以通过 module.rules 属性来配置使用哪些 Loader。一个 Loader 的配置由以下几个参数组成：
test：用于匹配待处理的文件。use：指定使用哪个 Loader 进行处理。exclude：排除不需要被处理的文件。
例如，通过以下配置将所有 .js 文件都使用 babel-loader 进行处理，转换为 ES5 代码：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- ---------------
-------- ---------------
-
-
-
--在实际项目中，我们需要根据需求选择不同的 Loader。下面我们来介绍一些常用的 Loader。
Babel-loader
Babel 是一个广泛使用的 JavaScript 编译器，可以将 ES6 代码转换为 ES5 代码，同时支持 JSX 和 TypeScript 等语言。
Babel-loader 是一个用于 Webpack 的 Loader，可以对 JavaScript 文件进行转换。使用 Babel-loader 时，需要安装 babel-loader 和 @babel/core 两个包。
下面是一个简单的 Babel-loader 配置示例：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- ---------------
-------- ---------------
-
-
-
--CSS-loader
CSS-loader 用于解析 CSS 文件，处理 @import 和 url() 属性，并将 CSS 代码转换为 JavaScript 代码，添加到应用程序中。
使用 CSS-loader 时，需要安装 css-loader 包。
下面是一个简单的 CSS-loader 配置示例：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- -------------
-
-
-
-File-loader
File-loader 用于处理文件资源，如图片、字体等，将文件复制到打包后的目录中，并返回文件的 URI。使用 file-loader 时，需要安装 file-loader 包。
下面是一个简单的 File-loader 配置示例：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------------------
---- -
-
------- --------------
-------- ---
--
--
--
-
-
-Plugins
Webpack 的插件系统基于事件机制，插件通过监听 Webpack 广播的事件，来处理一些额外的任务，比如：优化资源、压缩输出、统计代码等。
使用方式
Webpack 插件一般有两种使用方式：
- 在配置文件中声明
- 在 Node.js 中编写插件
配置文件中声明
Webpack 插件可以通过 plugins 属性来声明，plugins 是一个数组，数组中每个元素都是一个插件对象。
插件对象可以是一个构造函数，Webpack 在启动时会创建该插件实例，并调用其 apply 方法。
下面是一个简单的插件配置示例：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-------- -
--- -------------------
--------- ----------------
--
-
-编写插件
Webpack 插件通常是一个包含 apply 方法的 JavaScript 对象。该方法会在 Webpack 启动时被调用，并接收一个 compiler 对象作为参数，该对象上包含了 Webpack 的所有配置信息。
下面是一个简单的插件示例：
-- -------------------- ---- -------
----- -------- -
--------------- -
-- ---- ------- ------
-------------------------------------- -- -- -------------------- -- ----------------
-- ---- ---- ------
----------------------------------- -- -- -------------------- --- -------- --------------
-
-
-------------- - ---------在插件中，可以注册一系列事件处理函数，用于处理 Webpack 事件。
下面是一些常用的 Webpack 事件：
beforeRun：在 Webpack 开始启动时触发。run：在读取记录之前，但在编译前触发。watchRun：在监听模式下开始重新编译之前触发。compile：在一个新的编译周期开始时触发。emit：在生成资源阶段完成之后触发。done：在编译完成后触发。
结语
本文介绍了 Webpack 中的 loaders 和 plugins，这两个机制广泛应用于前端工程化项目，是让 Webpack 处理各种资源类型的重要手段。希望本文能帮助到大家更好地应用 Webpack，以及提高 Webpack 方面的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67825d7d935627c900040390
