The front-end page version is always silly and confused? Use this plug-in to do it with one click

In practice, we often publish front-end code to the server through pipelines, automatic scripts, etc. Sometimes it is difficult to tell whether the release was successful or not. Or when multiple people and multiple branches share the same environment, it is easier to fight chaotically.

"Who covered my code again?!"

"Who is that, has it been released for production?"

"Is the assembly line hung up and hasn't reported an error?"

Testing and development are crying.

How to quickly identify the version of the current page code? We can use webpack.DefinePlugin inject information into the whole world.

You can also use version-plugin with one click, and the effect is as follows:

The following is the plug-in documentation:

version-plugin

The webpack plugin used to inject version information into the project code.

https://www.npmjs.com/package/version-plugin

begin

First install version-plugin :

npm install version-plugin -D

Then add VersionPlugin related configuration to the webpack configuration:

webpack.config.js

const VersionPlugin = require('version-plugin');

module.exports = {
  plugins: [new VersionPlugin()]
};

Run npm run dev or npm run build , version-plugin will inject the global variable VERSION_INFO into the project.

Options

Plug-in options

variable name	Types of	Defaults	description
name	{String}	VERSION_INFO	Variable name injected into the global
mode	{'all'｜String｜Array}	development	Specify in which webpack modes to enable
dataOption	{Object}	{}	Specific version information configuration

mode

For security reasons, Version Plugin only development mode by default. If you change it to all , it will be enabled in all modes, and you can also pass in the specified mode name or array.

dataOption

Version Plugin will inject two versions of git_branch and git_commit_hash

The following information is also available for selection:

git_commit_fullhash
git_commit_time
git_commit_author
git_commit_commiter
git_commit_message
package_version
build_time

Setting this information to true will enable it. If you pass String / Number value or function, the default value will be overwritten. In addition to the above 9 information, you can also transfer extended fields by yourself.

Example:

new VersionPlugin({
  name: '_v_',
  mode: ['production', 'development'],
  dataOption:{
    git_commit_hash: false,
    git_commit_fullhash: true,
    git_commit_author: true,
    package_version: () => '1.0.0',
    extra_data_foo: 'extra_data_bar'
  }
})

Then look at the browser console:

// window._v_

{
  git_branch: "develop",
  git_commit_fullhash: "c3252175510b100a4a139f2af4b3f73ef753483a",
  git_commit_author: 'LiPinghai',
  package_version: "1.0.0", 
  extra_data_foo: "extra_data_bar"
}