Webpack 页面更新检查插件

每次前端部署到服务器上都需要清除缓存，这样才能保证页面是最新的，不知道是什么原因

思路

哈哈哈，好巧，这是我面试题库里的题之一，我的方案是路由守卫里加实现，做法也很简单，/version.json 是发布时候的一个时间戳 - {202205234345564}，beforeRoute 里有动作就请求 /version.json?{random}，和当前程序里的 version 不一致就提示并自动刷新

实现

ws 和轮训都不太行，开销太大。

插件源码 SetScriptTimestampPlugin.js

// SetScriptTimestampPlugin.js
const packageJson = require('./package.json')
const fs = require('fs')

class SetScriptTimestampPlugin {
  apply (compiler) {
    compiler.hooks.compilation.tap('SetScriptTimestampPlugin',
      (compilation, callback) => {
        console.log('SetScriptTimestampPlugin!')
        console.log('packageJson', packageJson)
        const version = {}
        version.version = packageJson.version
        version.buildTime = new Date().getTime()
        const data = JSON.stringify(packageJson, null, 2)
        fs.writeFileSync('public/version.json', data)
      })
  }
}
module.exports = SetScriptTimestampPlugin

配置 webpack

const SetScriptTimestampPlugin = require('./SetScriptTimestampPlugin.js')

plugins: [
  new SetScriptTimestampPlugin()
]

然后每次修改代码了都会更新 version.json，这样就可以让用户刷新页面了，具体还是需要在项目代码中实现。

Webpack 页面更新检查插件

思路

实现

配置 webpack

参考文章