Simple webpack plugin that generates VERSION and commitInfo insert index.html during build

Last update: Mar 8, 2022

Overview

Html commit version plugin

Simple webpack plugin that generates CommitInfo and VERSION insert index.html during build.

Usage

Given a webpack 4 project, install it as a local development dependency:

npm install html-commit-version-plugin --save-dev

Then, simply configure it as a plugin in the webpack config:

var HtmlGitVersionPlugin = require("html-commit-version-plugin");

module.exports = {
  plugins: [
    new HtmlGitVersionPlugin()
  ],
};

It outputs a VERSION and commitInfo such as:

<!--
    "commitId": "1b461c43dc868511d5e19e3ea05c2f3d3ecac7fb",
    "version": "v1.0.2",
    "commitName": "Frank",
    "buildDate": "2021-4-15 10:6"
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>Management platform</title>
    <link rel="shortcut icon" href="/static/favicon.ico" />
    <link href="/main.47b5ac25.css?1e0c7c7a42e21948252e" rel="stylesheet"></head>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="/runtime.1e0c7c7a.js?1e0c7c7a42e21948252e"></script>
    <script type="text/javascript" src="/vendors~main.1e0c7c7a.js?1e0c7c7a42e21948252e"></script>
    <script type="text/javascript" src="/main.1e0c7c7a.js?1e0c7c7a42e21948252e"></script>
  </body>
</html>

Configuration

The plugin requires no configuration by default, but it is possible to configure it to support custom commitInfo.

Plugin API

The COMMITINFO, VERSION are also exposed through a public API.

const webpack = require("webpack");
const HtmlVersionPlugin = require("html-commit-version-plugin");

module.exports = {
  plugins: [
    new HtmlVersionPlugin({
      commitId: true, // show commitId
      version: true, // show commit tag，if no tag, show branch
      commitName: true, // show commitName
      buildDate: true, // show buildDate
      email: false, // show email, default false
    }),
  ],
};

A simple To-do list page, build with Webpack, HTML, CSS, and mostly JavaScript

This is a simple To-do list page, build with Webpack, HTML, CSS, and mostly JavaScript. You can add, remove, edit and complete tasks, then clear all completed.

Mar 4, 2022

A browser game build with phaser 3 during the Ludum Dare 50 GameJam.

Loading... 🎮 It’s him again! In front of your home this human appears! And with him soon again this pesky progress bar! Fight the data packs with all

Aug 22, 2022

This is the version to be reviewed - "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. A simple website that allows for doing that, and built using ES6 and Webpack!

Todo-list "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as comple

Dec 20, 2022

This repo. contain some "Login page" , That I have made during learning and practicing HTML & CSS.

Login-Page This repo. contain some "Login page" , That I have made during learning and practicing HTML & CSS. Table of content: v1 v2 Objective and Re

Jan 28, 2022

A simple To-do app project made using JavaScript ES6 and Webpack - Microverse. You can add, remove, check tasks, and remove all the tasks that were done at the same time. Feel free to see the live version, if you like it please give it a star!

To Do List a to do list javascript app buit using webpack and es6. Built With HTML CSS JavaScript Wepack Live Demo (if available) Live Demo Link Getti

Dec 17, 2022

This a To-do app in wich the user can add, remove and edit tasks. The app was build using HTML, CS, JavaScript and Webpack.

To Do List This a To-do app in wich the user can add, remove and edit tasks. The app was build using HTML, CS, JavaScript and Webpack. Built With HTML

Jun 30, 2022

This is a simple web app that allows a user add list of tasks that needs to be completed. It is built using webpack and served by a webpack dev server.

TO-DO-LIST "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as compl

Aug 19, 2022

A personal semantic search engine capable of surfacing relevant bookmarks, journal entries, notes, blogs, contacts, and more, built on an efficient document embedding algorithm and Monocle's personal search index.

Revery 🦅 Revery is a semantic search engine that operates on my Monocle search index. While Revery lets me search through the same database of tens o

Dec 30, 2022

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Build with Html, CSS, JS, API, and Webpack.

Mar 11, 2022

Simple webpack plugin that generates VERSION and commitInfo insert index.html during build

Related tags

Overview

Html commit version plugin

Usage

Configuration

Plugin API

You might also like...

A simple To-do list page, build with Webpack, HTML, CSS, and mostly JavaScript

A browser game build with phaser 3 during the Ludum Dare 50 GameJam.

This is the version to be reviewed - "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. A simple website that allows for doing that, and built using ES6 and Webpack!

This repo. contain some "Login page" , That I have made during learning and practicing HTML & CSS.

A simple To-do app project made using JavaScript ES6 and Webpack - Microverse. You can add, remove, check tasks, and remove all the tasks that were done at the same time. Feel free to see the live version, if you like it please give it a star!

This a To-do app in wich the user can add, remove and edit tasks. The app was build using HTML, CS, JavaScript and Webpack.

This is a simple web app that allows a user add list of tasks that needs to be completed. It is built using webpack and served by a webpack dev server.

A personal semantic search engine capable of surfacing relevant bookmarks, journal entries, notes, blogs, contacts, and more, built on an efficient document embedding algorithm and Monocle's personal search index.

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Build with Html, CSS, JS, API, and Webpack.

Owner

In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaScript index file that imported all the modules and assets

In this project, I build a simple HTML list of To Do tasks. This simple web page will be built using webpack and served by a webpack dev server.

Obsidian.md plugin to integrate with Zotero, create literature notes and insert citations from a Zotero library.

An experimental plugin to preview and insert block patterns in WordPress.

This project is about the awesome books we did during Microverse to build a website for adding and removing the books.Done using HTML and ES6 JAVASCRIPT and modules

In this project, we built a simple HTML list of To Do tasks. This simple web page was created using webpack and served by a webpack dev server.

In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications listed later in this lesson. This simple web page is built using webpack and served by a webpack dev server.

A simple HTML page maintaining list of To Do tasks using webpack and served by a webpack dev server.

This project is about building a simple HTML list of To Do tasks. Built using webpack and served by a webpack dev server.

Obsidian plugin that allows user to create a glossary of files, an index of files or both.