於網頁中放置 git commit ID 作為版本參考資訊，提供線上網站版本識別依據。
前言
當網站開發串上 CI / CD 後，由於一切全自動所以有時候會對線上網站產生版本上的懷疑 ( e.g. 我明明改了怎麼結果還是錯！是不是沒上到版！)，而這種情況在 SIT / UAT 測試時更是屢見不鮮，因這段期間程式變動相當頻繁，因此版號並不會跟著變動，所以可以考慮把 git 的 commit id 補上作為識別，這樣就不會再有類似的情況發生了。
實作目標
在打包時期筆者希望保留以下三種資訊於 HTML 上，提供版本識別依據：
- 版本號 (取自 package.json)
- 版控碼 (取自 local git repo - 目前 commit id )
- 打包當下的時間
加入版本號
可透過 process.env.npm_package_version 取得 package.json 中描述的 version 資訊，並且希望可以將該資訊呈現在 index.html 網頁上，因此需要透過 HtmlWebpackPlugin 這個插件來達成；首先調整 wepack 設定檔來加入 HtmlWebpackPlugin 插件，並設定 vInfo 參數來放置 npm_package_version 資訊如下。
接著在 index.html 中擺上 vInfo 資訊，並將該區塊 display 樣式設為 none 避免在畫面中顯示。
加入版控碼 & 時間
此部分需要使用 GitRevisionPlugin 插件來取得本地端 git repo 資訊，直接先安裝起來。
接著 new 出 GitRevisionPlugin 實體。
最後將剛剛產生的 gitRevisionPlugin 實體加入 webpack 的 plugins 清單中，並在 vInfo 中使用 gitRevisionPlugin.version() 補上目前 git commit id 及時間 Date.now() 就搞定了。
驗證
先來看看目前 package.json 中版本資訊為 v1.1.0 。
目前 git 版控的 commit id 為 a987820 。
最終打包出來的 index.html 檔案中確實紀載 v1.1.0 版，對應的 commit id 為 a987820，而打包時間可透過 new Date(1581933021742) 取得可識別日期，這樣就可以掌握目前線上的版本，避免不必要的紛爭出現。
希望此篇文章可以幫助到需要的人
若內容有誤或有其他建議請不吝留言給筆者喔 !
