利用 generate-asset-webpack-plugin 插件生成编译的前端包版本信息

---

背景

在项目的完整发版过程中，会包含开发、测试、仿真、上线等多个阶段，同时也会对应项目代码的dev、master等多个分支，如果项目上线的地方比较多，拉取的分支会越来越多。项目部署的环境也会有测试、安全测试、仿真、生产等多套环境，为了清晰快速地知道当前环境部署的前端包打包对应的版本信息，可利用 generate-asset-webpack-plugin 插件结合生成版本信息的函数在 webpack 进行打包时自动生成包含版本信息的 json 文件并添加到输出目录。
本文利用此插件生成的静态资源 version.json 中包含 git 分支、最新的 git 提交记录 id、打包时间信息。

---

一、优点

1. 部署时可以通过查看此文件，检查打包时代码分支是否错误，当前分支的代码是否对应远程仓库中最新的提交记录，比如博主的项目在服务器上部署了自动化打包，可通过这个文件比较直观的先排查服务器打包的前端包版本是否有误
2. 生产环境可能发布了多个版本之后，项目中可能拉取了许多对应的发版分支，生产环境如果出现问题需要修复，且如果发现问题的时间间隔较久，可能会忘记那一次发版对应的代码是那一套，是何时提供的前端包，有了这个版本信息的 json 文件，就可以快速的知道

二、编码

1.安装插件

npm i generate-asset-webpack-plugin -D

本文中使用的插件版本为 0.3.0

2.配置插件

本文项目是 vue 框架，配置文件为 vue.config.js

const GenerateAssetPlugin = require('generate-asset-webpack-plugin')
// 引入生成 json 文件的 函数，version.js 存放在根目录下
const createCompileVersionJsonFile = require('./version')
module.exports = {
   
  publicPath: './',
  // ...
  configureWebpack: {
   
    performance: {
   
      hints: false
    },
    plugins: [
      new GenerateAssetPlugin({
   
        filename: 'version.json',
        fn: (compilation, cb) => {
   
          cb(null, createCompileVersionJsonFile(compilation))
        },
        extraFiles: []
      }