前言

作为一名前端开发者，每次发布完毕通过什么方式来验证发布是否生效？

通过验证功能？
查看响应头、cdn 携带的版本号？
后台查看 CICD 流程？

今天小编为大家带来一个插件，可以在控制台以色块的方式打印漂亮的版本号（当然不只是可以展示版本号，任何你想展示的重要的信息都可以）

说了这么多，先给大家一睹芳容：

怎么样？有没有很熟悉在哪里见过类似的色块？

是的，就是 Shield 或者大家在 github、npm 上经常看见的徽标

先说显眼不显眼，好看不好看吧？

使用方式

很简单，是一个 webpack 插件，引入方式

// esm
import { PrettyConsoleWebpackPlugin } from '@sprit/pretty-console-webpack-plugin';
// cjs
const { PrettyConsoleWebpackPlugin } = require('@sprit/pretty-console-webpack-plugin');

然后，在 webpack plugins 选项加入插件

new PrettyConsoleWebpackPlugin({
  git: {
    branch: true,
    hash: 7,
    lastCommitDateTime: true
  },
  // 此处可以打印任何你想打印到浏览器控制台的信息
  custom() {
    return {
      '构建版本': process.env.BUILD_VERSION // 环境变量
    };
  }
})

结尾

目前这个插件只支持 html-webpack-plugin@5x 版本，低版本的没试，你们可以自己试试~ 👏🏻欢迎给个 star ⭐️ 源码

在浏览器控制台打印漂亮版本号

前言

使用方式

结尾