本文介绍一款前端开发中十分实用的工具包——webpack-modificators，它可以帮助我们在应用 webpack 进行打包时，更方便地对源代码进行增强和调整。我们将会从以下几个方面对其进行详细讲解：
- webpack-modificators 简介
- 安装和配置
- 使用示例：使用 postloader 工具对代码进行注入
- 使用示例：在打包后的代码中插入指令
webpack-modificators 简介
webpack-modificators 是一个用于 webpack 的插件，它可以让我们在打包前或打包后对代码进行修改和注入。这里的 "修改" 可以包含以下内容：
- 对代码添加额外的指令。
- 重构代码，添加一些浏览器不支持的 JavaScript 功能。
- 对代码进行混淆、压缩。
它提供了常用的钩子函数来完成前置和后置的代码修改。正是因为它的简单易用以及高灵活性，因此 webpack-modificators 被越来越多的前端开发者所使用。
安装和配置
首先，我们需要通过 npm 安装 webpack-modificators：
npm install webpack-modificators --save-dev
然后，在 webpack 的配置文件中进行如下配置：
-- -------------------- ---- -------
----- ------------------- - --------------------------------
-- ---
-------------- - -
-- ---
-------- -
--- --------------------- -- ------- -- ---
-- ---
--
-- ---
-webpack-modificators 的选项在这里省略，大部分情况下，我们不会传入任何配置。
使用示例：使用 postloader 工具对代码进行注入
接下来，我们将以代码注入为例，进行使用示例的介绍。我们将使用一款名为 postloader 的 webpack-plugin 来实现代码自定义注入的功能。
首先，我们需要在 webpack 的配置文件中进行如下配置：
-- -------------------- ---- -------
----- ------------------- - --------------------------------
----- ---------------- - -------------------------------------
-------------- - -
-- ---
-------- -
--- ---------------------
----------- ---------- -------- --------- -- -
----- ------ - --- ------------------
------------- --------- -- -
------ --------- --------------- ------------------------- ------------
--
---
-----------------------
-----------
--
---
-- ---
--
-- ---
-这里我们传递了一个 postloader 的选项，它接收了三个参数。回调函数 postCallback 将在打包完成后调用，它将读取打包后的代码，对代码进行修改并返回修改后的代码。
在本例子中，我们定义的 postCallback 函数是在打包后的代码最后添加一个 alertModified 函数，它的作用是输出一个 log 信息来表示代码已经被修改。
使用示例：在打包后的代码中插入指令
在上一章节中，我们讲解了使用注入的方式对代码进行修改。下面，我们将会使用不同的方式，来向打包后的代码中插入指令。这里我们将使用 ast-transform 集成包对代码进行修改，实现插入指令的效果。
首先，我们需要安装一些依赖包：
npm install babel-core babel-types ast-transform --save-dev
然后，在 webpack 的配置文件中进行如下配置：
-- -------------------- ---- -------
----- ------------------- - --------------------------------
----- ------- - -------------------
----- - ----------------- ------ - - - ----------------------
----- -------- - --------------------------------------
-------------- - -
-- ---
-------- -
--- ---------------------
---------- -
----- --------
---------- ------------ -- -
----- --- - ------------------------- - ----------- -------- ---
---------
----
------ -- -
-- ---------- --- ---------- -
----- --------------- - ---------------------- -- ------------------------
----- --------- - -----------------------------------------------
-----------------------------
-
-
--
------ --------------------- ----- -
-------- -------------------------------------
--------
--
--
---
-- ---
--
-- ---
-在这段代码中，我们传入了一个 preloader 的选项，它定义了一个包含 test 和 transform 函数的对象。test 中定义了我们想要修改的文件类型，这里是 ".js" 文件；而 transform 则定义了钩子函数，它会在打包前被调用。
在 transform 中，我们首先使用 babylon 解析入参的 sourceCode 将其解析为 AST 抽象语法树。之后，我们调用 ast-travers 的 API，替换了抽象树中的内容。在这个示例中，我们在每个程序的开头插入了一行代码，它输出了一个指令。最后，将修改后的 AST 抽象语法树转为可执行的代码，就完成了这个工作。
总结
我们讲解了 webpack-modificators，它非常实用并广泛地被应用于前端开发。在这篇文章中，我们主要介绍了如何使用 preloader 和 postloader 来进行代码的修改和注入，并通过示例代码来为读者展示具体的使用方式。期望本文能够让前端开发者们在日常工作中更方便、更高效地使用 webpack。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671068dd3466f61ffddb6