🇨🇳 中文 README | 🇬🇧 English README
unplugin-version-injector is a powerful and lightweight plugin that automatically injects the version number and build timestamp into all HTML files. It supports Webpack 4/5, Vite, and Rollup, making it ideal for both Single Page Applications (SPA) and Multi-Page Applications (MPA).
✅ Auto-injects <meta name="version"> into all HTML <head> sections
✅ Auto-injects a <script> that logs version & build time in the browser console
✅ Supports Webpack 4 & 5, Vite, and Rollup
✅ Works in Multi-Page Applications (MPA)
✅ Highly configurable: Supports manually specifying the version or using package.json
# Using Yarn
yarn add -D unplugin-version-injector
# Using npm
npm install -D unplugin-version-injectorModify your webpack.config.js:
const versionInjectorPlugin = require('unplugin-version-injector');
module.exports = {
plugins: [
versionInjectorPlugin.webpack({
version: '1.2.3', // (Optional) Manually specify version
})
],
};Modify your vite.config.js:
import versionInjectorPlugin from 'unplugin-version-injector';
export default {
plugins: [versionInjectorPlugin.vite()]
};Modify your rollup.config.js:
import versionInjectorPlugin from 'unplugin-version-injector';
export default {
plugins: [versionInjectorPlugin.rollup()]
};After building, all HTML files will include the following:
<head>
<meta name="version" content="1.2.3">
<meta charset="UTF-8">
<title>My App</title>
</head>
<body>
<h1>Hello World</h1>
<script>
console.log("%c Version: 1.2.3 ", "background: #222; color: #00ff00; font-size: 12px; padding: 4px; border-radius: 4px;");
console.log("%c Build Time: 2024-03-01T12:00:00.000Z ", "background: #222; color: #ffcc00; font-size: 12px; padding: 4px; border-radius: 4px;");
</script>
</body>✅ Console Output (Colored Logs)
🟢 Version: 1.2.3 (Green)
🟡 Build Time: 2024-03-01T12:00:00.000Z (Yellow)
| Option | Type | Description | Default |
|---|---|---|---|
version |
string |
Custom version (e.g., 1.2.3) |
Auto-read from package.json |
log |
boolean |
Enable/Disable console logs | true |
dateFormat |
string |
Format for build time | ISO 8601 |
versionInjectorPlugin.webpack({
version: '2.0.0',
log: false, // Disable console logs
});- 🛠 Works out of the box: No extra setup needed
- 🚀 Improves debugging: Always know what version is running in production
- 📅 Track build times: Useful for monitoring deployments
- 🎯 Lightweight & fast: Minimal overhead with maximum benefits
MIT License © 2024 Nian YI
Pull requests are welcome! If you encounter any issues, feel free to open an issue on GitHub.
GitHub Repository: 🔗 unplugin-version-injector
🔥 unplugin-version-injector – The simplest way to keep track of your app's version & build time! 🚀