git-revision-webpack-plugin 踩坑日记

首先我们看下官方怎么说
https://www.npmjs.com/package/git-revision-webpack-plugin
没错，这里是webpack5版本的案例，所以我们用如果不是webpack5的话，估计很多朋友就报错了。

webpack5用法案例

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

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

module.exports = {
  plugins: [new GitRevisionPlugin()],
}

webpack4用法案例

npm install git-revision-webpack-plugin@3.0.6

webapck3或者更老

npm install git-revision-webpack-plugin@2.5.1

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

这里要看下源码，可以看到

image.png

所以导出和5不一样要注意下。

如何查看vue-cli的webpack包版本

使用方法 vue.config.js 要自己看下node_module里面当前cli的版本依赖的webpack包，这里就不说了。自己会看的吧。

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

module.exports = {
  plugins: [
    gitRevisionPlugin,
    new webpack.DefinePlugin({
      VERSION: JSON.stringify(gitRevisionPlugin.version()),
      COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash()),
      BRANCH: JSON.stringify(gitRevisionPlugin.branch()),
      LASTCOMMITDATETIME: JSON.stringify(gitRevisionPlugin.lastcommitdatetime()),
    }),
  ],
}