简介

项目注入构建信息的 webpack / vite 插件，兼容 vuecli4/5、webpack4/5、vite4

效果

从控制台可以看到，打印了当前项目的 git 信息以及最后部署时间，非常人性化，再也不用担心部署的代码是不是最新的了~

原理

• vuecli4 是基于 webpack4 的，主要是根据 compiler.hooks.emit 这个钩子，在入口文件注入项目信息然后再输出
• vuecli5 是基于 webpack5 的，主要是根据 compiler.hooks.compilation 这个钩子以及 compilation.hooks.processAssets， 对入口文件进行注入项目信息然后再输出
• vite4，主要是根据 transformIndexHtml 这个钩子（vite 插件特有），对 index.html 注入项目信息

本质上就是给你的项目入口/所有 html 插入一串 js 代码。

安装

npm i wxw-plugin --save-dev

使用

vuecli4

vue.config.js

const BilldHtmlWebpackPlugin = require('billd-html-webpack-plugin')

module.exports = {
  // ...
  chainWebpack: (config) => {
    // ...
    config
      .plugin('billd-html-webpack-plugin')
      .use(BilldHtmlWebpackPlugin, [{ env: 'vuecli4' }])
  },
}

vuecli5

vue.config.js

const { defineConfig } = require('@vue/cli-service')
const BilldHtmlWebpackPlugin = require('billd-html-webpack-plugin')

module.exports = defineConfig({
  // ...
  chainWebpack: (config) => {
    // ...
    config
      .plugin('billd-html-webpack-plugin')
      .use(BilldHtmlWebpackPlugin, [{ env: 'vuecli5' }])
  },
})

webpack4

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const BilldHtmlWebpackPlugin = require('billd-html-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    // ...
    new HtmlWebpackPlugin(),
    // 请确保billd-html-webpack-plugin插件在html-webpack-plugin插件后面
    new BilldHtmlWebpackPlugin({ env: 'webpack4' }),
  ],
}

webpack5

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const BilldHtmlWebpackPlugin = require('billd-html-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    // ...
    new HtmlWebpackPlugin(),
    // 请确保billd-html-webpack-plugin插件在html-webpack-plugin插件后面
    new BilldHtmlWebpackPlugin({ env: 'webpack5' }),
  ],
}

vite

vite.config.ts

import BilldHtmlWebpackPlugin from 'billd-html-webpack-plugin';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  plugins: [
    // ...
    new BilldHtmlWebpackPlugin({ env: 'vite' }).config,
  ],
});

配置

import MyPlugin from 'wxw-plugin'

new MyPlugin({
  env: 'webpack5',
  log: [
    'pkgName', // pkg名称
    'pkgVersion', // pkg版本
    'pkgRepository', // 显示pkg仓库
    'commitHash', // 显示git提交主题
    'commitSubject', // git提交分支
    'commitBranch', // git提交日期
    'committerDate', // git提交哈希
    'committerName', // git提交者名字
    'committerEmail', // git提交者邮箱
    'lastBuildDate'// 最后构建日期
  ]
})