In practice, we often publish front-end code to the server through pipelining, automated scripting, and so on. Sometimes it’s hard to tell if a launch is successful or not. Or when many people, many branches share an environment, it is more prone to chaos fighting.

“Who overwrote my code again? !”

“That who, released production or not?”

“The assembly line is down and there is no error??”

Testing, development are crying.

How can I quickly identify what version of the current page code is? We can inject information globally ourselves using webpack.definePlugin.

Version-plugin can also be used with one click, and the effect is as follows:

The following is the plug-in documentation:

version-plugin

A WebPack plug-in for injecting version information into project code.

www.npmjs.com/package/ver…

start

Install version-plugin first:

npm install version-plugin -D
Copy the code

Add the VersionPlugin configuration to the WebPack configuration:

webpack.config.js

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

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

Run NPM run dev or NPM run build, and version-plugin injects the global variable VERSION_INFO into the project.

options

Plug-in options

The variable name type The default value describe
name {String} VERSION_INFO The name of the variable injected into the global
mode {'all' | String | Array} development Specifies which WebPack modes are enabled
dataOption {Object} {} Specific version information configuration

mode

For security reasons, the Version Plugin is only enabled in Development Mode by default. Setting it to all will enable it in all modes, or you can pass in the specified mode name or array.

dataOption

The Version Plugin injects git_branch and git_COMMIT_HASH versions by default.

There is also the following information for selection:

git_commit_fullhash
git_commit_time
git_commit_author
git_commit_commiter
git_commit_message
package_version
build_time
Copy the code

Setting this information to true will enable it, and passing String/Number values or functions will override the default values. In addition to the above nine items of information, you can also pass the extended field.

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'}})Copy the code

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"
}
Copy the code