使用htmlWebpackPlugin添加代码版本信息

一枚小银子

已于 2022-08-02 22:15:46 修改

阅读量684

点赞数

分类专栏：看完不懂我吃电脑文章标签： git 前端

于 2022-08-02 22:09:26 首次发布

本文链接：https://blog.csdn.net/qq_43119912/article/details/126105319

版权

看完不懂我吃电脑专栏收录该内容

8 篇文章 0 订阅

订阅专栏

不知道你是不是这样的场景哈，或者曾经是。你提交完代码、部署然后测试去测，测试说你这个bug改了吗，怎么还是一样？然后你就纳闷，改过了啊代码也提交了，然后你自己去点一遍验证提交的代码有没有部署上去。这是一个痛点，可能也都习惯了哈，其实，这里有个很好很简单的方式去解决这个问题。

方案：使用htmlWebpackPlugin在打包时，自动在index.html中添加代码版本信息，具体如下：

const childProcess = require('child_process')
const branchName = childProcess.execSync('git rev-parse --abbrev-ref HEAD')
const lastCommitHash = childProcess.execSync('git rev-parse HEAD')

打包时，childProcess会开启一个子进程来跑命令，git rev-parse --abbrev-ref HEAD获取当前分支名称，git rev-parse HEAD获取当前分支最近一次提交记录的hash，获取到这两信息后传入plugin：

htmlWebpackPlugin: {
            options: {
                branchName,
                lastCommitHash,
            }
        }

最后一步，在项目index.html里写入：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <!--通过脚本生成 
        构建时间: <%= new Date() %>
        分支名称：<%= htmlWebpackPlugin.options.branchName %>
        最近一次提交：<%= htmlWebpackPlugin.options.lastCommitHash %>-->
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="x5-orientation" content="portrait" />
    </head>
</html>

这样子打包部署后，index.html里就有相应信息了，看代码有没有部署上去直接点控制台Elements看注释的这里就能知道了。

一枚小银子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用htmlWebpackPlugin添加代码版本信息

不知道你是不是这样的场景哈，或者曾经是。你提交完代码、部署然后测试去测，测试说你这个bug改了吗，怎么还是一样？然后你就纳闷，改过了啊代码也提交了，然后你自己去点一遍验证提交的代码有没有部署上去。这是一个痛点，可能也都习惯了哈，其实，这里有个很好很简单的方式去解决这个问题。这样子打包部署后，index.html里就有相应信息了，看代码有没有部署上去直接点控制台Elements看这里就能知道了。......
复制链接

扫一扫