在 Web 开发中，前端工程师经常需要使用打包工具将多个 JavaScript 文件合并为一个文件，并且进行各种代码转换。Webpack 是目前最流行的打包工具之一，而 loader-utils 是一个能够帮助开发者编写自定义 Webpack loader 的 npm 包。本文将详细介绍如何使用 loader-utils 来编写自己的 Webpack loader。
安装 loader-utils
首先，我们需要通过 npm 安装 loader-utils：
--- ------- ---------- ------------
使用 loader-utils
loader-utils 的主要作用是提供了一些方便的工具函数，可以帮助开发者编写高效、可复用的 Webpack loader。
getOptions 函数
getOptions 函数可以获取 Webpack loader 的 options 对象。options 是 Webpack 配置文件中配置 loader 时传入的参数，例如：
-------------- - -
------- -
------ -
-
----- --------
---- -
------- ------------
-------- -
---- -----
---- ------
--
--
--
--
--
--在 my-loader 中，可以通过调用 getOptions 函数获取 options 对象：
----- - ---------- - - ------------------------
-------------- - -------- -------- -
----- ------- - -----------------
-- ------------- -
-- ---
-
-- ------------- -
-- ---
-
------ -------
--stringifyRequest 函数
stringifyRequest 函数可以将 Webpack 请求对象转换成字符串。Webpack 请求对象中包含了模块的绝对路径和查询参数。在编写 Webpack loader 时，我们通常需要将请求对象转换成字符串，并将其传递给其他 loader 或插件。
----- - ---------------- - - ------------------------ -------------- - -------- -------- - ----- ------- - ---------------------- ----------------------------- -- ------- --- ----------------------------------------- ------ ------- --
getRemainingRequest 和 getCurrentRequest 函数
getRemainingRequest 函数可以获取剩余的请求部分，getCurrentRequest 函数可以获取当前请求的完整部分。
例如，在以下 Webpack 配置中：
-------------- - -
------- -
------ -
-
----- --------
---- ------------- ----------------
--
--
--
--在 my-loader 中，可以通过调用 getRemainingRequest 函数获取剩余的请求部分（即 other-loader 处理之后的请求）：
----- - ------------------- - - ------------------------ -------------- - -------- -------- - ----- ---------------- - -------------------------- -- ---------------- --- --------------------- ------ ------- --
在 my-loader 中，可以通过调用 getCurrentRequest 函数获取当前请求的完整部分：
----- - ----------------- - - ------------------------ -------------- - -------- -------- - ----- -------------- - ------------------------ -- -------------- --- ------------------------------- ------ ------- --
interpolateName 函数
interpolateName 函数可以根据模板字符串生成文件名。在 Webpack 中，我们经常需要将多个文件打包成一个文件，并且为每个文件生成唯一的名称。interpolateName 函数可以帮助我们实现这一功能。
----- - --------------- - - ------------------------ -------------- - -------- -------- - ----- ---- - --------------------- --------------- - -------- ------ --- -- ---- --- -------------------------------------- ------ ------- --
interpolateName 函数支持以下模板变量：
[name]：模块的名称。[path]：模块的路径。[ext]：模块的后缀。[folder]：模块所在文件夹的名称。[hash]：模块内容的 MD5
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/51901