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、公众号:公众号「进军全栈攻城狮」 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!
学习之余,不要忘记吃饭了,惊喜红包