webpack打包追加时间戳

小刘今天学前端了吗

于 2022-09-08 17:47:55 发布

阅读量2.3k

点赞数 2

分类专栏： js基础错误处理文章标签： webpack javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_43389779/article/details/126769202

版权

js基础同时被 2 个专栏收录

20 篇文章

订阅专栏

错误处理

11 篇文章

订阅专栏

在iOS上遇到H5页面无法自动更新的问题，原因是系统会缓存同名资源。通过在vue.config.js中配置Webpack的output选项，使每次打包生成的JS文件名包含时间戳，确保文件名不同，从而强制浏览器加载最新版本。这样，每次更新都能正确反映在用户端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

在开发H5时发现由于iOS无法手动清除软件缓存（除非卸载重装），导致新版本上传后页面始终无法更新。

原因分析

iOS始终从缓存中读取同名资源，导致无法加载浏览器中最新版本，所以只要确保每次新打包生成的文件名不同就可以解决

解决方法

在vue.config.js文件中加入以下配置

const TimeStamp = new Date().getTime()

module.exports = {
	configureWebpack: {
    	output: {
      		filename: `js/[name].${TimeStamp}.js`,
      		chunkFilename: `js/[name].${TimeStamp}.js`
    	}   
  	}
 }