在前端开发中使用 webpack 自动化构建已经成为越来越多开发者的选择，而管理版本号通常也是一个不可或缺的操作。Webpack 中的一个 npm 包 webpack-auto-inject-version 可以帮助我们自动注入版本号，本文将详细介绍如何使用这个包。
安装
首先安装 webpack-auto-inject-version 并将其作为开发依赖项：
npm install webpack-auto-inject-version --save-dev
配置
在 webpack 配置文件中添加相关配置：
-- -------------------- ---- -------
----- ----------------- - ---------------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
------------------ -----------------
------ ----
------- -----
----------- -
-------------------- ------
---------------- -----
------------ ----
--
------------------ -
-------------------- ---
---------------- -
---- --------- -----------
----------- ---- -- ---- ---------
--
------------ -
---------- ------
-- ----
-
--
---- ------------
--------------------- ------
------------------- --------- -----------
--
-
-其中 WEBPACK_VERSION 代表将版本号注入到哪些文件中， PACKAGE_JSON_PATH 代表 package.json 文件的路径， components 中的 InjectAsComment 代表将版本号以注释的形式注入文件。
componentsOptions 中的 InjectAsComment 还可以配置注释格式和日期格式。
示例
以一个 React 项目为例：
package.json 文件：
{
"name": "my-project",
"version": "1.0.0",
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - ---------------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -------------------
------------------ -----------------
------ ----
------- -----
----------- -
-------------------- ------
---------------- -----
------------ ----
--
------------------ -
-------------------- ---
---------------- -
---- --------- -----------
----------- ---- -- ---- ---------
--
------------ -
---------- ------
-
--
---- ------------
--------------------- ------
------------------- --------- -----------
--
-
--index.js 文件，我们以注释形式将版本号注入到文件中：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ -- -------- ----------- -- ---------------- ---------- ------------ ------------------------------- --
编译后的文件如下：
/* Version: 1.0.0 */
(function(e,t){var n=...})(window);总结
通过以上配置，我们可以非常方便地将版本号注入到 JavaScript、CSS、HTML 等文件中，在项目中方便地管理版本号。
使用 webpack-auto-inject-version 可以使我们的项目版本号管理变得更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eef6910efcef77a054b7574