前言
webpack引入version-manage-webpack-plugin，提供对构建内容dist/的版本管理能力，实现非覆盖式发布部署。
什么是非覆盖式发布部署
- 每次构建都保留旧版本资源，部署后不影响线上正在使用的用户。
- 只有当用户刷新浏览器或者重新访问时，才切换到最新版本。
- 可以快速的对构建资源进行版本回滚。
原理
- 构建时资源输出到
dist/，由于文件名是根据文件内容hash生成的，所以相同文件覆盖，不同文件并存。 - 以
package.json的version作为本次版本号，将版本号与本次打包生成的资源目录之间的映射关系，记录在version-manage.json文件上。如下：
{
"1.0.0":{
"entryFileSource":"<!doctype html><html><head><meta charset="utf-8"/></head><body><script src="js/main.416b9938.js"></script><script>console.log("Current version: 1.0.0")</script></body></html>",
"assetsPaths":["js/main.416b9938.js","index.html"],
"compileTime":1634181428
}
}
- 回滚时，仅需修改版本号后执行构建，
plugin会根据version-manage.json的记录回滚index.html文件，即可实现版本的回滚。
功能
- 版本与资源目录管理。（
dist/version-manage.json） - 旧版本恢复。
- 版本修订号自增加。
- 清除过期版本（记录，资源文件）。
- 控制台打印版本号。
安装
npm i --save-dev version-manage-webpack-plugin
yarn add --dev version-manage-webpack-plugin
使用
const VersionManageWebpackPlugin = require('version-manage-webpack-plugin')
module.exports = {
//...
plugins: [
// 添加到结尾处
new VersionManageWebpackPlugin()
]
}
参数
| 字段 | 类型 | 默认值 | 描述 |
|---|---|---|---|
entryFileName | {String} | index.html | Html入口文件 |
autoIncVersion | {Boolean} | false | 版本修订号是否自增加 |
indent | {Number} | 2 | 代码缩进，修改package.json文件时使用 |
maxAge | {Number} | 0 | 版本最大存储周期（秒）。始终保留上一个版本 |
log | {Boolean} | false | 访问时，控制台打印当前版本号 |
提示
- 通过手动修改
package.json版本号恢复旧版本。 - 生产环境构建时使用。
- 关闭脚手架构建前清除打包目录功能。
构建
设置package.json的version，指定本次版本号1.0.0。
回滚版本
设置package.json的version，指定需要回滚的版本号1.0.0。
清除旧版本
设置maxAge参数，构建时清除过期版本，注：始终保留上一个版本。
new VersionManageWebpackPlugin({
maxAge: 24 * 60 * 60, // 过期时间为一天
})
