git项目中加入版本号git-revision-webpack-plugin

webpack 插件生成 VERSION 和 COMMITHASH 基于本地生成过程中的文件的Git仓库。

便于我们在项目中可直观看到提交的git commithash

用法：

给定一个webpack 4项目，将其安装为本地开发依赖项：

npm install --save-dev git-revision-webpack-plugin

然后，将其配置为webpack配置中的插件：

const GitRevisionPlugin = require('git-revision-webpack-plugin');

const gitRevision = new GitRevisionPlugin();

在webpack的plugins: [ ],中配置gitRevision即可

plugins: [
    gitRevision
],

插件API

VERSION，COMMITHASH并且BRANCH也通过一个公共的API暴露。使用DefinePlugin的示例：

plugins: [
    gitRevision,
    new webpack.DefinePlugin({
        'process.env.VERSION': JSON.stringify(gitRevision.version()),
        'process.env.COMMITHASH': JSON.stringify(gitRevision.commithash()),
        'process.env.BRANCH': JSON.stringify(gitRevision.branch())
    })
],

在页面中可以直接使用process.env.xxx方法显示，如下

    <div id="version">
      {process.env.VERSION}
      {process.env.COMMITHASH}
      {process.env.NODE_ENV === 'development' && process.env.BRANCH &&
      <>
         <span>{process.env.BRANCH}</span>
      </>
      }
    </div>

version：如 v0.0.0-34-33bb4fad

commithash：如 33bb4fadcaa5bf1253a551c68bcf17c945cf8ed5

branch：如dev ， master等

其他配置 地址参考：git-revision-webpack-plugin - npm package | Snyk

交流

1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解  群号:   856402057

2、公众号：公众号「进军全栈攻城狮」 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！

学习之余，不要忘记吃饭了，惊喜红包