js加版本号 webpack_Webpack Plugin 自动生成版本号等配置并通过前端服务器获取更新微信缓存旧代码问题...

[目录]

背景

引申问题

思路

使用示例

Env添加版本变量

插件代码

配置文件中引入VersionPlugin

验证版本号并处理

Shell终端执行打包

优化

如何通过编译指令指定版本号？

其他插件

其他处理缓存方式及问题

参考文章

[TAG]:

Vue

JavaScript

Webpack Plugin

自动版本号

微信缓存更新

背景

微信H5开发中，遇到了问题：

微信H5对Index.html缓存问题，使得提测过程中、发布Release版本后，用户端看到的页面依旧是缓存的html/js/cs

在JavaScrip文件分包情况下，项目重新打包后，由于发布时清除了原js文件，如果html已缓存，就会出现加载不到js的错误

由于需求和测试需要，支付渠道需要切换，每次为了一个配置参数却需要反复提交TAG

引申问题

版本号如何自动生成？能否指定版本号？

如何获取版本号等配置？通过Service服务器API获取就会对Service侵入——接口同学要是善良尚可，要是......

思路

本着自己的问题自己解决，既然前端都是服务器在跑，那就直接提供个配置访问文件，打包时复制一份岂不快哉。但是每次提测、发布都还得手动修改版本？怎么行？通过Webpack Plugin、运行脚本自动生成吧。

前提: js等文件需要通过hash配置文件名，否则在微信缓存过期前貌似只能通过手动清理缓存处理。文件名配置参考

使用示例

Env添加版本变量

// 示例

// 文件：/config/prod.env.js

module.exports = {

NODE_ENV: '"production"',

VERSION:'"v1.0 [' + new Date().toLocaleString() + ']"'

}

// 文件：/config/dev.env.js

module.exports = merge(prodEnv, { // 这里使用了merge, 为了后续判断所以需要设置空字符串

NODE_ENV: '"development"',

VERSION: '""', // 开发环境置空才不会判断版本，因为开发环境未配置自动生成版本配置信息

}

// 文件：/config/index.js

module.exports =