简介
在前端开发中，我们经常需要使用 webpack 这个打包工具。而 webpack 的强大之处，除了它的灵活性和可定制性，还在于可以通过 loader 来处理各种各样的文件类型。但是，编写一个好的 loader 也是一件非常具有挑战性的事情，特别是对于那些刚刚接触 webpack 的开发者来说。那么，有没有办法可以在不需要涉及很多复杂的 webpack 配置的情况下，轻松地编写 loader 呢？这个时候，我们就可以使用 webpack-loader-helper 这个 npm 包。
webpack-loader-helper 是一个用来简化 loader 编写的辅助模块，它提供了一些实用的工具函数和插件来帮助我们快速编写高效的 loader，并且可以使得我们的 loader 与 webpack 的版本相互适应。现在，我们就来学习一下 webpack-loader-helper 的使用方法。
安装和导入
我们可以通过 npm 安装 webpack-loader-helper：
npm install webpack-loader-helper --save-dev
然后，在我们写 loader 的代码中，需要导入 webpack-loader-helper：
-- -------------------- ---- -------
----- - ---------- - - -----------------------
----- - -------- - - -----------------------
----- ------- - ------------------
----- ------ - --------------------------------
-------- ----------------- ---- ----- -
----- ------- - ----------------
----------------------------- -------- -
----- --- --------
------------- ----------
--
----- -------- - ------------
-----------------------------
------------- ------------------
-------- -------------
--------
------- --------
---------- ----
-----
-------- ---------------- -- ---------------------
-------- -
-------- -------------
--
--------
-- ----- ------- -- -
-- ----- -
------ -------------
-
-------------- -------------- ----------------- ------------
--
-使用
webpack-loader-helper 提供了一些工具函数和插件，我们可以根据自己的需要来使用。
getContext
getContext() 函数可以获取当前 loader 的根目录，用来指定插件所需的上下文。例如，我们使用了 postcss-import 这个插件来处理 css 文件中的 import 声明，那么就需要使用 getContext() 函数来获取根目录：
const context = helper.getContext(this.rootContext || this.options.context, options.context)
postcss([require('postcss-import')({ root: context })])getOptions
getOptions() 函数可以获取当前 loader 的 options 对象。需要注意的是，这个函数需要使用 loader-utils 模块才能正确执行：
const options = getOptions(this)
schema-utils
schema-utils 模块可以帮助我们有效地验证 options 对象的正确性。使用方法如下：
-- -------------------- ---- -------
----- - -------- - - -----------------------
----- ------------------- - -
----- ---------
----------- -
----- -
----- ---------
--
---- -
----- ---------
--
--
-
----------------------------- -------- -
----- --- --------
------------- ----------
--runLoaderWithPlugins
runLoaderWithPlugins() 是 webpack-loader-helper 的核心函数之一，这个函数可以运行我们定义的 loader，并且根据配置中指定的插件列表来处理 loader 的输出结果。例如，我们在编写一个 css loader 的时候，需要使用 postcss 插件来处理 css 文件中的语法和代码：
-- -------------------- ---- -------
----- -------- - ------------
-----------------------------
------------- ------------------
-------- -------------
--------
------- --------
---------- ----
-----
-------- ---------------- -- ---------------------
-------- -
-------- -------------
--
--------
-- ----- ------- -- -
-- ----- -
------ -------------
-
-------------- -------------- ----------------- ------------
--runLoaderSyncWithPlugins
runLoaderSyncWithPlugins() 函数和 runLoaderWithPlugins() 函数类似，只不过它是同步运行的。通常情况下，我们使用异步的方式来运行 loader 更加安全，因为我们无法预测插件所需的时间和资源消耗。但是，在某些情况下，如果我们需要立即处理 loader 的输出结果，那么可以考虑使用这个函数：
-- -------------------- ---- -------
----- ------ - ---------------------------------
------------- ------------------
-------- -------------
--------
------- --------
---------- ----
-----
-------- ---------------- -- ---------------------
-------- -
-------- -------------
--
--------
--示例
最后，我们来看一个简单的示例。假设我们有一个名为 myLoader 的 loader，它可以读取 javascript 文件中的变量声明，并将其转化成 ES6 模块的形式。例如，我们的源代码如下：
var name = 'Alice' var age = 18 console.log(name, age)
我们的 loader 需要将其转化成这样的形式：
export var name = 'Alice' export var age = 18 console.log(name, age)
实现的代码如下：
-- -------------------- ---- -------
----- - ---------- - - -----------------------
----- - -------- - - -----------------------
----- ------ - --------------------------------
----- ----- - ----------------
----- ------------------- - -
----- ---------
----------- -
----- -
----- ---------
--
---- -
----- ---------
--
--
-
-------- ----------------- ---- ----- -
----- ------- - ----------------
----------------------------- -------- -
----- --- --------
------------- ----------
--
----- --- - -------------------- - ----------- -------- --
----- ----------- - --
----------------------- -- -
-- ---------- --- ---------------------- -
--------------------------------------- -- -
------------------
----- -------------------------
------------ -
----- ----------------------
------------- --------------
----- --------
--
----------- ---
--
--
- ---- -- ---------- --- ------------------------- -
----------------------
-
--
-------- - -----------
----- -------- - ------------
-----------------------------
------------- ------------------
-------- -------------
--------
------- --------------------
---------- ----
-----
-------- ---------------- -- ---------------------
-------- -
-------- -------------
--
-- ----- ------- -- -
-- ----- -
------ -------------
-
-------------- -------------- ----------------- ------------
--
-
-------------- - --------现在，我们就可以在 webpack 的配置文件中使用我们的 loader 进行测试了：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
---- --
------- ------------
-------- -
----- ---------
---- ---------
--
---
--
--
--当我们运行 webpack 进行打包的时候，loader 就会自动调用我们的 myLoader 函数，并将其输出结果作为打包后的代码的一部分。这样，我们就可以方便地实现类似 babel 这样的转化工具，并将其集成到我们的前端项目中了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671058dd3466f61ffdd6e