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

背景

因为公司产品属于B端的产品，客户有定制产品升级也不一致，而且客户比较强硬，必须在客户版本上解决问题，所以只能根据客户反正解决，导致版本信息比较乱，所以开发本插件 注入插件后，配置一下在浏览器的console里面显示

作用和效果

1. 全部提交后的效果

   
   image.png

2. 漏提交后的效果

   
   image.png

3. 无git信息时

image.png

安装

npm i build-version-plugin -D

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)
 ]
})