为什么要做这件事

实现效果

如下，当打开F12，可以直观的看到打包日期、分支、提交hash、提交时间

如何做

主要是借助 git-revision-webpack-plugin的能力。获取到git到一些后，将这些信息注入到变量中，html读取这个变量即可

1. 安装dev的依赖

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

2. 引入依赖并且初始化

   const { GitRevisionPlugin } = require('git-revision-webpack-plugin')
const gitRevisionPlugin = new GitRevisionPlugin()

3. 注入变量信息

我这里用的是vuecli，可直接在chainWebpack中注入，当然你可以使用DefinePlugin进行声明

     config.plugin('html').tap((args) => {

          args[0].banner = {
date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
branch: gitRevisionPlugin.branch(),
commitHash: gitRevisionPlugin.commithash(),
lastCommitDateTime: dayjs(gitRevisionPlugin.lastcommitdatetime()).format('YYYY-MM-DD HH:mm:ss'),

          }
return args

    });

4. 使用变量

在index.html的头部插入注释

  <!-- date  <%= htmlWebpackPlugin.options.banner.date %> -->
<!-- branch  <%= htmlWebpackPlugin.options.banner.branch %> -->
<!-- commitHash  <%= htmlWebpackPlugin.options.banner.commitHash %> -->
<!-- lastCommitDateTime  <%= htmlWebpackPlugin.options.banner.lastCommitDateTime %> -->

5. 查看页面

6. 假如你用的是vuecli

当你使用的是vuecli，构建完后会发现index.html上这个注释丢失了

原因如下

vueCLi 对html的打包用的html-webpack-plugin,默认在打包的时候会把注释删除掉

修改vuecli的配置如下可以解决，将removeComments设置为false即可

module.exports = {

  // 其他配置项...

  chainWebpack: config => {

    config

    .plugin('html')

    .tap(args => {

       args[0].minify = {

         removeComments: false,

         // 其他需要设置的参数

       };

       return args;

     });

  },

};

7. 假如你想给qiankun的子应用添加一些git的注释信息，可以在meta中添加

 <meta name="description"
content="Date:<%= htmlWebpackPlugin.options.banner.date %>,Branch:<%= htmlWebpackPlugin.options.banner.branch %>,commitHash: <%= htmlWebpackPlugin.options.banner.commitHash %>,lastCommitDateTime:<%= htmlWebpackPlugin.options.banner.lastCommitDateTime %>">

渲染在html上如下，也可以快速的看到子应用的构建时间和具体的分支

总结