## 前言 `webpack`引入[version-manage-webpack-plugin](https://github.com/zengdoc/version-manage-webpack-plugin)，提供对构建内容`dist/`的版本管理能力，实现`非覆盖式发布部署`。 ## 什么是非覆盖式发布部署 1. 每次构建都保留旧版本资源，部署后不影响线上正在使用的用户。 2. 只有当用户刷新浏览器或者重新访问时，才切换到最新版本。 3. 可以快速的对构建资源进行版本回滚。 ## 原理 1. 构建时资源输出到`dist/`，由于文件名是根据文件内容`hash`生成的，所以相同文件覆盖，不同文件并存。 2. 以`package.json`的`version`作为本次版本号，将版本号与本次打包生成的资源目录之间的映射关系，记录在`version-manage.json`文件上。如下： ```json { "1.0.0":{ "entryFileSource":"", "assetsPaths":["js/main.416b9938.js","index.html"], "compileTime":1634181428 } } ``` 3. 回滚时，仅需修改版本号后执行构建，`plugin`会根据`version-manage.json`的记录回滚`index.html`文件，即可实现版本的回滚。 ## 功能 - 版本与资源目录管理。（`dist/version-manage.json`） - 旧版本恢复。 - 版本修订号自增加。 - 清除过期版本（记录，资源文件）。 - 控制台打印版本号。 ## 安装 ```js npm i --save-dev version-manage-webpack-plugin ``` ```js yarn add --dev version-manage-webpack-plugin ``` ## 使用 ```js 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`。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d94c1f384e4b42ec9859e9bba4fe08c3~tplv-k3u1fbpfcp-watermark.image?) ## 回滚版本设置`package.json`的`version`，指定需要回滚的版本号`1.0.0`。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f78ce0575c624b04b1ac77d50a83cdd7~tplv-k3u1fbpfcp-watermark.image?) ## 清除旧版本设置`maxAge`参数，构建时清除过期版本，注：始终保留上一个版本。 ```js new VersionManageWebpackPlugin({ maxAge: 24 * 60 * 60, // 过期时间为一天 }) ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/75d4f415812c4beebe60188ce700475c~tplv-k3u1fbpfcp-watermark.image?)