webpack 打包增長版本信息

時間 2020-01-03

標籤 webpack 打包增長版本信息简体版

原文原文鏈接

What do we need？

筆者目的是在vue項目打包後的 dist/index.html 文件中寫入本次打包git用戶、最後一次git提交信息，這樣作的目的是便於線上項目的管理和防止同事之間的相互扯皮。
最後打包出的效果以下圖：html

How to do？

版本信息須要記錄 git最後一次提交做者（做者名和郵箱郵）、日期、commit HEAD，本次打包git用戶和郵箱、日期，這些信息都須要使用 git 命令來獲取到。在 node 中，要執行一段命令行腳步須要使用 child_process 模塊。
項目 build 目錄下新建 version.js 文件，編寫以下代碼：vue

const child_process = require('child_process')

// git 最後一次提交的 Head
const commit = child_process.execSync('git show -s --format=%H').toString().trim()
const commitUserName = child_process.execSync('git show -s --format=%cn').toString().trim()
const commitUserMail = child_process.execSync('git show -s --format=%ce').toString().trim()
const commitDateObj = new Date(child_process.execSync(`git show -s --format=%cd`).toString())
const commitDate = `${commitDateObj.getFullYear()+'-'+(commitDateObj.getMonth()+1)+'-'+commitDateObj.getDate()+' '+commitDateObj.getHours()+':'+commitDateObj.getMinutes()}`
const buildUserName = child_process.execSync('git config user.name').toString().trim()
const buildUserMail = child_process.execSync('git config user.email').toString().trim()
const nowDate = new Date()
const buildDate = `${nowDate.getFullYear()+'-'+(nowDate.getMonth()+1)+'-'+nowDate.getDate()+' '+nowDate.getHours()+':'+nowDate.getMinutes()}`

module.exports = {commit, commitUserName, commitUserMail, commitDate, buildUserName, buildUserMail, buildDate}

在 webpack.prod.conf.js 文件中引入 version.js 模塊，並修改 HtmlWebpackPlugin 插件的配置。node

const BuildInfo = require('./version.js')

new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: false, // index.html 保留註釋
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency',
      buildInfo: JSON.stringify(BuildInfo) 
    }),

接着在 index.html 文件內容開頭添加版本信息註釋。webpack

<!--
 <%= htmlWebpackPlugin.options.buildInfo %>
 -->
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

至此大功告成！！！git

suggest up-and-coming youngster

同事提議可將版本信息從 index.html 抽出來搞個 version.html，他是這樣實現的：github

一、項目根目錄下新建 version\index.html 文件web

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,IE=11,IE=10">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <title>版本聲明</title>
</head>

<body>
<p>commit: <%= htmlWebpackPlugin.options.buildInfo.commit %></p>
<p>commitUserName: <%= htmlWebpackPlugin.options.buildInfo.commitUserName %></p>
<p>commitDate: <%= htmlWebpackPlugin.options.buildInfo.commitDate %></p>
<p>buildUserName: <%= htmlWebpackPlugin.options.buildInfo.buildUserName %></p>
<p>buildUserMail: <%= htmlWebpackPlugin.options.buildInfo.buildUserMail %></p>
<p>buildDate: <%= htmlWebpackPlugin.options.buildInfo.buildDate %></p>
</body>

</html>

二、 webpack.prod.conf.js 文件中新增一個 HtmlWebpackPlugin 配置項chrome

new HtmlWebpackPlugin({
      filename: './static/version.html',
      template: 'version/index.html',
      inject: false,//不插入生成的js 僅用於版本聲明
      minify: {
        removeComments: false,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      buildInfo: BuildInfo
    }),

這樣打包後會生成 dist\static\version.html ，成功將版本信息和index.html 文件分離。編程

本文轉載自：https://www.limitcode.com/detail/5e0bf02210dcbf0b1852b374.htmlapi

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。