1. 背景
在前端的开发工作中，我们经常需要在代码中插入 git 的 hash 值，以便于识别代码版本。但是，手动输入 git 命令获取 hash 值比较繁琐，而且容易出错。
为了解决这个问题，我们可以使用 npm 包 reg-keygen-git-hash-plugin。
2. 安装
在使用 reg-keygen-git-hash-plugin 前，我们需要先在项目中安装该包。
--- ------- ---------- --------------------------
3. 使用
安装完成后，我们就可以在项目中使用 reg-keygen-git-hash-plugin 来生成 git 的 hash 值了。具体使用方法如下：
3.1 在 webpack.config.js 中配置
在项目中使用 webpack 进行打包时，我们需要在 webpack.config.js 中加入以下代码：
----- ---------------------- - --------------------------------------
-------------- - -
-- ---------
-------- -
--- ------------------------
-- ---
--
-
-3.2 配置项说明
在上述代码中，我们在 RegKeygenGitHashPlugin 的构造函数中提供了一个配置项。下面是这个配置项的说明：
key：{string} [可选，默认为 'gitHash']，设置要插入的 hash 值的键名。callback：{function} [可选，默认为 null]，当插入 hash 值时，要执行的回调函数。
这里我们可以根据实际需求来设置这些配置项。比如，我们可以将生成的 hash 值插入到 HTML 文件中的某个地方：
----- ---------------------- - --------------------------------------
-------------- - -
-- ---------
-------- -
--- ------------------------
---- ----------
--------- -------------- -
----- -- - --------------
----- ------- - ---------------------------------- --------
-------------- ------- ----- ------
----------------------------------- ---------
-
--
-
-3.3 示例使用
将生成的 hash 值插入到 HTML 文件中。
在 webpack.config.js 文件中添加如下代码：
----- ---------------------- - --------------------------------------
----- ----------------- - -------------------------------
-------------- - -
-- ---------
-------- -
--- -------------------
------ -------- ------ ---------
--------- -------------------
--------- ------------
---
--- ------------------------
---- ----------
--------- -------------- -
----- -- - --------------
----- ------- - ---------------------------------- --------
-------------- ------- ----- ------
----------------------------------- ---------
-
--
-
-在 index.html 中添加如下代码：
--- ----- --------------- ------------- ------- ----- ---
这样，在构建项目时，插件会自动将 git 的 hash 值插入到 HTML 的 meta 标签中。如果我们使用浏览器的开发者工具来查看该页面的源代码，就可以看到这个 meta 标签以及对应的 hash 值了。
4. 总结
通过使用 reg-keygen-git-hash-plugin，我们可以方便地在项目中插入 git 的 hash 值，从而更好地管理代码版本。下面是这篇文章的完整代码：
----- ---------------------- - --------------------------------------
----- ----------------- - -------------------------------
-------------- - -
-- ---------
-------- -
--- -------------------
------ -------- ------ ---------
--------- -------------------
--------- ------------
---
--- ------------------------
---- ----------
--------- -------------- -
----- -- - --------------
----- ------- - ---------------------------------- --------
-------------- ------- ----- ------
----------------------------------- ---------
-
--
-
-来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/70832