webpack 打包增加版本信息
程序员文章站
2022-03-29 10:53:35
What do we need？ 笔者目的是在vue项目打包后的 dist/index.html 文件中写入本次打包git用户、最后一次git提交信息，这样做的目的是便于线上项目的管理和防止同事之间的相互扯皮。最后打包出的效果如下图： How to do？ 版本信息需要记录 git最后一次提交作者（ ......
what do we need？
笔者目的是在vue项目打包后的 dist/index.html 文件中写入本次打包git用户、最后一次git提交信息，这样做的目的是便于线上项目的管理和防止同事之间的相互扯皮。
最后打包出的效果如下图：
how to do？
版本信息需要记录 git最后一次提交作者（作者名和邮箱邮）、日期、commit head，本次打包git用户和邮箱、日期，这些信息都需要使用 git 命令来获取到。在 node 中，要执行一段命令行脚步需要使用 。
项目 build 目录下新建 version.js 文件，编写如下代码：
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 插件的配置。
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 文件内容开头添加 版本信息注释。
<!-- <%= htmlwebpackplugin.options.buildinfo %> --> <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
至此大功告成！！！
suggest up-and-coming youngster
同事提议可将版本信息从 index.html 抽出来搞个 version.html，他是这样实现的：
1、项目根目录下新建 version\index.html 文件
<!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>
2、 webpack.prod.conf.js 文件中新增一个 htmlwebpackplugin 配置项
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 文件分离。
本文转载自：
上一篇： 微信营销的技巧 怎么让粉丝主动加你？
下一篇： [vue学习]快速搭建一个项目