git打包版本信息整合Webpack插件

背景

因为公司产品属于B端的产品，客户有定制产品升级也不一致，而且客户比较强硬，必须在客户版本上解决问题，所以只能根据客户反正解决，导致版本信息比较乱，无法定位打包时间和打包人以及是否提交完整等。 注入插件后，配置一下在浏览器的console里面显示。

里面肯定还有很多BUG,大家将就着看。

作用和效果

1. 全部提交后的效果

2. 漏提交后的效果

3. 无git信息时

安装

npm i build-version-plugin -D

源码

https://github.com/iwlking/build-version-plugin

VueCli3配置

修改 vue.config.js

// 引入插件
const BuildVersionPlugin = require('build-version-plugin')
const pkg = require('./package.json')

// 添加注入插件
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'development') {
        config.plugins.push(
          new BuildVersionPlugin(pkg)
        )
    }
}

VueCli2配置

修改 build 下修改 webpack.prod.conf.js

// 引入插件
const BuildVersionPlugin = require('build-version-plugin')
const pkg = require('../package.json')

// 添加注入插件
const webpackConfig = merge(baseWebpackConfig, {
  plugins: [
    new BuildVersionPlugin(pkg)
  ]
})