当前位置：首页 > news >正文

Webpack中的文件指纹：给资源戴上个“名牌”

news 来源：原创 2025/9/13 5:06:30

Webpack中的文件指纹：给资源戴上个“名牌”

你是否想过，当你修改代码后，浏览器为什么仍然拿着旧版资源不放？秘密就在于——文件指纹！简单来说，文件指纹就像给每个构建出来的文件贴上独一无二的“姓名牌”，告诉浏览器：“嘿，我更新啦，换下旧货吧！”

文件指纹到底是什么？

文件指纹（File Fingerprinting）其实就是在文件名中附加一段由文件内容生成的哈希值。举个例子：

旧版：app.js
新版：app.3b8a1f2e.js

哈希值（如 3b8a1f2e）就像文件的身份证，只有内容真的发生变化，身份证才会“变脸”。这样就能让浏览器和CDN准确辨认出哪个版本是最新的。

为何我们需要文件指纹？

告别缓存乱象
浏览器喜欢把东西缓存起来，但一不小心就用成了“老古董”。有了指纹，文件更新了，新的“身份证”就会迫使浏览器重新加载最新版本。
CDN高效管理
CDN节点依据URL来缓存文件，不同的指纹就代表不同的文件，确保用户拿到的都是最新鲜的资源。
版本管理更轻松
就像手机APP版本号一样，文件指纹有助于追踪每次小改动，便于日后排查问题。
长期缓存实现高性能加载
只要文件内容不变，指纹也不变，这样用户就能一直利用缓存，提升加载速度。

Webpack中常见的指纹方式

Webpack提供了三种主要的哈希方式，让你在不同场景下选择最适合的：

1. Hash

特点：基于整个构建过程生成一个统一哈希
缺点：只要项目里任意文件变了，所有输出文件的指纹都会发生变化，相当于全家换新装

示例配置：

output: {filename: '[name].[hash:8].js',path: __dirname + '/dist'
}

2. Chunkhash

特点：每个入口文件（或“块”）都有自己的哈希
适用场景：多个页面、多个入口文件中，只有部分入口发生变化时，未改动入口文件的缓存可以完美保留

示例配置：

output: {filename: '[name].[chunkhash:8].js',path: __dirname + '/dist'
}

3. Contenthash

特点：只根据文件内容生成哈希，如果内容不变，哈希绝不更新
推荐：当前最理想的做法，特别适合用于需要长期缓存的静态资源

示例配置：

output: {filename: '[name].[contenthash:8].js',path: __dirname + '/dist'
}

在Webpack中配置文件指纹

JavaScript文件

直接在output配置中使用指纹：

module.exports = {output: {filename: '[name].[contenthash:8].js',chunkFilename: '[name].[contenthash:8].chunk.js',path: __dirname + '/dist'}
}

CSS文件

配合mini-css-extract-plugin插件来使用指纹，注意新版Webpack中建议使用[contenthash]来确保CSS文件仅在实际改动时更新：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {plugins: [new MiniCssExtractPlugin({filename: '[name].[contenthash:8].css',chunkFilename: '[name].[contenthash:8].chunk.css'})]
}

图片、字体等资源

对于这类静态资源，如果你使用的是旧版本Webpack，可以借助file-loader，格式如下：

module.exports = {module: {rules: [{test: /\.(png|jpg|gif)$/,use: [{loader: 'file-loader',options: {name: '[name].[hash:8].[ext]'}}]}]}
}

小提示： 从Webpack 5开始，已经内置了资源模块（Asset Modules）功能，可以省去安装file-loader的烦恼哦！

最佳实践和一些纠正

只在生产环境使用指纹
开发阶段追求快速反馈，不需要每次构建都重新生成长长的文件名，毕竟调试时只关心“有木有改！”
保证哈希长度适中
通常8位哈希已足够，既简洁又能保证冲突率低。
固定模块ID防止无谓哈希变化
如果发现文件内容没变但指纹却变了，可能是模块ID在不断变化。旧做法是使用HashedModuleIdsPlugin，而在Webpack 5中，更推荐使用内置的确定性算法：
```
optimization: {moduleIds: 'deterministic',runtimeChunk: 'single'
}
```
CSS与JS分开缓存
为了避免CSS和JS文件因打包不同步导致的缓存混乱，确保它们分别使用contenthash。就像让两个好基友各自管理自己的家庭事务。
合理拆分代码
切记，把几乎不变的库代码（vendor）、偶尔更新的业务代码和常变的运行时代码分离开来。示例如下：
```
optimization: {splitChunks: {cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name: 'vendors',chunks: 'all'}}},runtimeChunk: 'single'
}
```
这样一来，就算你修改了一点点业务逻辑，其他部分依然能“坐享其成”，高速加载不是梦！

总结

文件指纹就像是给你的资源穿上了“高科技外衣”，不仅能让浏览器和CDN精确识别文件版本，还能避免因缓存问题带来的各种麻烦。无论是Hash、Chunkhash还是Contenthash，各有千秋，你只需选出最适合你项目的那一款。快乐构建，从有“名牌”的资源开始！

Webpack中的文件指纹：给资源戴上个“名牌”

Webpack中的文件指纹：给资源戴上个“名牌” 你是否想过，当你修改代码后，浏览器为什么仍然拿着旧版资源不放？秘密就在于——文件指纹！简单来说，文件指纹就像给每个构建出来的文件贴上独一无二的“姓名牌”&…...

编程日记 2025/9/13 5:06:30

1. 在Ubuntu官网下载Ubuntu server 20.04版本https://releases.ubuntu.com/20.04.6/ 2. 在vmware下安装Ubuntu 3. 改Ubuntu静态IP $ sudo vi /etc/netplan/00-installer-config.yaml# This is the network config written by ‘subiquity’ network: renderer: networkd eth…...

编程日记 2025/9/3 16:54:10

重构艺术 | 如何优雅地“提炼函数“

在工作中总数遇到非常多的长代码，俗称“屎山”，这类代码读起来特别费劲。自己想重构一遍，但是总感觉缺乏经验指导，因此，多读书，读好书可能是最优解之一。读《重构改善即有代码的设计》有感，便写…...

编程日记 2025/9/7 18:55:53

[项目]基于RT-Thread的CAN通信仪表盘显示屏: 一.项目概述与软硬件说明

基于RT-Thread的CAN通信仪表盘显示屏: 一.项目概述与软硬件说明一.项目概述二.硬件与软件资源一.项目概述功能结构图： 通过上位机发出模拟CAN数据给协议转换板，协议转换板将CAN协议数据转换为迪文屏数据，并通过迪文数据控制相关性质。 …...

编程日记 2025/9/9 13:01:27

如何查看自己 Android App 的私有数据？从 `adb backup` 到数据提取全过程

🛠️ 如何查看自己 Android App 的私有数据？从 adb backup 到数据提取全过程 📌 前言：作为一名 Android 开发者，我常常想知道自己写的 App 在用户设备上的数据存储结构是怎样的，比如有没有数据写入成功、有…...

编程日记 2025/9/12 7:52:16

Windows中xxx.dll动态链接库文件转xxx.a静态库文件

最近在学习探索C/C程序代码中调用Python代码时，出现了一个问题：下载的程序库文件，在使用MinGW编译C/C的代码时，一直提示无法链接，才发现是库类型不对应，无法导入链接。上图所示的Python对应库，…...

编程日记 2025/9/9 7:19:07

用Java NIO模拟HTTPS

HTTPS流程名词解释： R1:随机数1 R2:随机数2 R3:随机数3 publicKey:公钥 privateKey:私钥 step1 客户端 client hello R1 服务端 server hello R2 publicKey(验证证书，证书包含公钥) step2 客户端 R3 publicKey加密服务端 privateKey解密 s…...

编程日记 2025/9/10 11:41:13

基于YOLOv8的火车轨道检测识别系统：技术实现与应用前景

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ 1. 引言：火车轨道检测领域概述铁路运输作为国民经济的大动脉，其安全运行至关重要…...

编程日记 2025/9/7 6:32:06

解决 Ubuntu 上 Docker 安装与网络问题：从禁用 IPv6 到配置代理

解决 Ubuntu 上 Docker 安装与网络问题的实践笔记在 Ubuntu（Noble 版本）上安装 Docker 时，我遇到了两个常见的网络问题：apt-get update 失败和无法拉取 Docker 镜像。通过逐步排查和配置，最终成功运行 docker run he…...

编程日记 2025/9/5 17:03:07

DVDFab Virtual Drive电脑DVD备份和制作软件 v13.0.3.7 中文绿色便携

前言 DVDFab Virtual Drive是一个很厉害的光盘处理软件，它能帮你做几件事情：复制你的DVD或蓝光光盘作为备份，把这些光盘里的内容转换成其他格式，还能把视频文件刻录到DVD或蓝光光盘上。这个软件很灵活，能处理像DVD、蓝…...

编程日记 2025/9/13 4:45:51

FISCO BCOS区块链Postman接口测试：高级应用与实战技巧 [特殊字符]

引言：为什么Postman是FISCO BCOS测试的利器？在区块链开发领域，接口测试是确保系统稳定性和安全性的关键环节。作为国产领先的联盟链平台，FISCO BCOS在金融、政务、供应链等多个领域得到广泛应用。而Postman作为一款功能强大的API测试工具，凭借其直观的图形界面和丰富的测…...

编程日记 2025/9/10 5:35:06

a sort.py demo

这份代码展示了如何使用 sort.py。注意，此处，我将文件名改为 my_sort.py。你并不能直接 copy 使用，因为环境，包，还有模型。此处使用 SSD-MobileNetv2 进行物体检测，将结果传入以 np 数组的形式传入sort…...

编程日记 2025/9/5 15:41:23

Linux 入门八：Linux 多进程

一、概述 1.1 什么是进程？ 在 Linux 系统中，进程是程序的一次动态执行过程。程序是静态的可执行文件，而进程是程序运行时的实例，系统会为其分配内存、CPU 时间片等资源。例如，输入 ls 命令时，系统创建进程…...

编程日记 2025/9/9 4:09:15

学习如何设计大规模系统，为系统设计面试做准备！

前言在当今快速发展的技术时代，系统设计能力已成为衡量一名软件工程师专业素养的重要标尺。随着云计算、大数据、人工智能等领域的兴起，构建高性能、可扩展且稳定的系统已成为企业成功的关键。然而，对于许多工程师而言，如何有效…...

编程日记 2025/9/3 13:49:07

前端防御性编程

关于防御性编程你是否遇到过，接口请求失败或者返回数据错误，导致系统白屏或者前端自身写的代码存在一些缺陷，导致整个系统不够健壮，从而导致系统白屏常见的问题与防范最常见的问题访问了null或者undefined的属性 null.a …...

编程日记 2025/9/12 20:10:03

Java工具类-assert断言

我们可能经常在项目的单元测试或者一些源码中看到别人在使用assert关键字，当然也不只是Java语言，很多编程语言也都能看到，我们大概知道断言可以用于测试中条件的校验，但却不经常使用，本文总结了Java中该工具类的使用。…...

编程日记 2025/9/13 1:24:02

215. 数组中的第K个最大元素

1、题目分析顾名思义。 2.算法原理利用排序，再找到第k个最大的数字即可。 3.代码实操 class Solution { public:int findKthLargest(vector<int>& nums, int k) {sort(nums.begin(),nums.end());return nums[nums.size()-k];//123456真的方便啊} };…...

编程日记 2025/8/17 20:55:40

【2025年泰迪杯数据挖掘挑战赛】B题详细解题思路+数据预处理+代码分享

目录 2025年泰迪杯B题详细解题思路问题一问题分析数学模型Python代码Matlab代码问题二问题分析数学模型Python代码Matlab代码问题三问题分析数学模型Python代码Matlab代码问题四问题分析数学模型Python代码Matlab代码 2025年泰迪杯B题详细解题思路初步分析整理了B题的赛题分…...

编程日记 2025/9/8 14:44:57

对shell脚本敏感命令进行加密执行

我要加密这条命令：rm /root/scripty.sh 如何利用openssl aes-256-cbc 实现加密和解密，并执行命令加密、解密并执行命令的完整流程以下是使用 openssl aes-256-cbc 加密命令 rm /root/scripty.sh，解密并执行的详细步骤： 1. 加密…...

编程日记 2025/9/8 18:14:57

SQL ⑦-索引

索引索引是一种特殊的数据结构，它帮助数据库系统高效地找到数据。索引通过一定的规则排列数据表中的记录，使得对表的查询可以通过对索引的搜索来加快速度。索引好比书籍的目录，能帮助你快速找到相应的章节。 B树 B树是一种经常用于数…...

编程日记 2025/9/12 18:49:07

LinkedBlockingQueue使用场景有哪些

1、LinkedBlockingQueue 的特点 LinkedBlockingQueue 是 Java 中 java.util.concurrent 包下的一种阻塞队列，它有以下几个主要特点： 1.线程安全 LinkedBlockingQueue 是线程安全的，它内部使用了锁机制来确保多线程环境下的并发访问不会导致…...

编程日记 2025/9/7 16:45:35

关于难例损失函数小记

什么是难例损失函数（Hard Example Loss Function） 这玩意儿是深度学习训练中非常重要又很实用的一个概念，特别适用于处理数据不平衡、模型收敛缓慢、或者**想让模型更“挑剔”**的场景。 🌟 先从名字讲起： “难例”…...

编程日记 2025/9/1 13:25:35

小程序开发指南

小程序开发指南目录 1. 小程序开发概述 1.1 什么是小程序1.2 小程序的优势1.3 小程序的发展历程 2. 开发准备工作 2.1 选择开发平台2.2 开发环境搭建2.3 开发模式选择 3. 小程序开发流程 3.1 项目规划3.2 界面设计3.3 代码开发3.4 基本开发示例3.5 数据存储3.6 网络请求3.7 …...

编程日记 2025/9/12 17:06:12

RCE漏洞学习

1，What is RCE？ 在CTF（Capture The Flag）竞赛中，RCE漏洞指的是远程代码执行漏洞（Remote Code Execution）。这类漏洞允许攻击者通过某种方式在目标系统上执行任意代码，从而完全控制目…...

编程日记 2025/9/9 14:21:01

青少年编程考试 CCF GESP图形化编程三级认证真题 2025年3月

图形化编程三级 2025 年 03 月一、单选题（共 15 题，每题 2 分，共 30 分） 1、2025 年春节有两件轰动全球的事件，一个是 DeepSeek 横空出世，另一个是贺岁片《哪吒 2》票房惊人，入了全球票房榜…...

编程日记 2025/9/11 2:19:25

一、绪论（Introduction of Artificial Intelligence）

写在前面： 老师比较看重的点：对问题的概念本质的理解，不会考试一堆运算的东西，只需要将概念理解清楚就可以，最后一个题会出一个综合题，看潜力，前面的部分考的不是很深，不是很难&…...

编程日记 2025/9/11 22:58:45

多模态大语言模型arxiv论文略读（十五）

## Jailbreaking GPT-4V via Self-Adversarial Attacks with System Prompts ➡️ 论文标题：Jailbreaking GPT-4V via Self-Adversarial Attacks with System Prompts ➡️ 论文作者：Yuanwei Wu, Xiang Li, Yixin Liu, Pan Zhou, Lichao Sun ➡️ 研究机…...

编程日记 2025/9/6 12:20:07

漏洞报告：多短视频平台时间差举报滥用漏洞

漏洞标题：跨平台内容发布时序漏洞导致的恶意举报攻击向量漏洞类型：逻辑缺陷/滥用机制漏洞等级：中高风险漏洞描述： 攻击者可利用多平台内容发布时间差，伪造原创证明对合法内容发起恶意举报。该漏洞源于平台间缺乏发…...

编程日记 2025/9/8 1:08:10

【LINUX】学习宝典

一.Linux系统常用单词翻译 1.new folder 新建文件夹 2.paste 粘贴 3.select all 全选 4.open in terminal 打开终端/命令行 5.keep aligned 保持对齐 6.organize deaktop by name按名称组织桌面 7.change background更改背景 8.cancel 取消 9.create创造创建 10.wal…...

编程日记 2025/9/12 22:51:46

青少年编程考试 CCF GESP图形化编程四级认证真题 2025年3月

图形化编程四级 2025 年 03 月一、单选题（共 10 题，每题 2 分，共 30 分） 1、2025 年春节有两件轰动全球的事件，一个是 DeepSeek 横空出世，另一个是贺岁片《哪吒 2》票房惊人，入了全球票房榜…...

编程日记 2025/9/11 14:06:50

学习海康VisionMaster之平行线查找

一：进一步学习了今天学习下VisionMaster中的平行线查找，这个还是拟合直线的衍生应用，可以同时测量两条线段，输出中线二：开始学习 1：什么是平行线查找？ 按照传统的算法，必须是开两…...

编程日记 2025/9/8 6:23:08

小甲鱼第004讲：变量和字符串（下）| 课后测试题及答案

问答题: 0. 请问下面代码有没有毛病，为什么? 请问下面代码为什么会出错，应该如何解决？ 答:这是由于在字符串中，反斜杠()会与其随后的字符共同构成转义字符。为了避免这种不测情况的发生，我们可以在字符串的引号前面…...

编程日记 2025/9/11 9:24:51

2025 蓝桥杯省赛c++B组个人题解

声明本题解为退役蒻苟所写，不保证正确性，仅供参考。花了大概2个半小时写完，感觉比去年省赛简单，难度大概等价于 codeforces dv4.5 吧菜鸡不熟悉树上背包，调了一个多小时题目旁边的是 cf 预测分所有代码均以通…...

编程日记 2025/9/9 1:31:01

2025蓝桥杯算法竞赛深度突破：创新题型与高阶策略全解析

一、新型算法范式实战 1.1 元启发式算法应用（预测难度：★★★★） 题目场景：星际货物装载需在飞船载重限制下选择最优货物组合，引入遗传算法解决NP-Hard问题： 染色体编码：二进制串表示货物选择…...

编程日记 2025/9/7 2:27:36

网络流量管理-流（Flow）

1. 传统网络的问题：快递员送信模式想象你每天要寄100封信给同一个朋友，传统网络的处理方式就像一个固执的快递员： 每封信都单独处理：检查地址、规划路线、盖章、装车…即使所有信的目的地、收件人都相同，也要重复100…...

编程日记 2025/9/7 13:27:48

Spring Boot对接马来西亚股票数据源API

随着对东南亚市场的兴趣日益增长，获取马来西亚股票市场的实时和历史数据变得尤为重要。本文将指导您如何使用Spring Boot框架对接一个假定的马来西亚股票数据源API（例如，StockTV API），以便开发者能够轻松访问和处理这些…...

编程日记 2025/9/8 1:28:48

MySQL 面经

1、什么是 MySQL？ MySQL 是一个开源的关系型数据库，现在隶属于 Oracle 公司。是我们国内使用频率最高的一种数据库，我本地安装的是比较新的 8.0 版本。 1.1 怎么删除/创建一张表？ 可以使用 DROP TABLE 来删除表，使用…...

编程日记 2025/9/12 17:58:37

【Flink运行时架构】作业提交流程

本文介绍在单作业模式下Flink提交作业的具体流程，如下图所示。客户端将作业提交给YARN的RM；YARN的RM启动Flink JobManager，并将作业提交给JobMaster；JobMaster向Flink内置的RM请求slots；Flink内置的RM向YARN RM请求…...

编程日记 2025/9/8 10:22:39

【AutoTest】自动化测试工具大全（Java）

😊 如果您觉得这篇文章有用 ✔️ 的话，请给博主一个一键三连 🚀🚀🚀 吧 （点赞 🧡、关注 💛、收藏 💚）！！！您的支持 &#x…...

编程日记 2025/9/10 19:54:37

当DRAM邂逅SSD：新型“DRAM+”存储技术来了！

在当今快速发展的科技领域，数据存储的需求日益增长，对存储设备的性能和可靠性提出了更高的要求。传统DRAM以其高速度著称，但其易失性限制了应用范围；而固态硬盘SSD虽然提供非易失性存储，但在速度上远不及DRAM。为了解…...

编程日记 2025/9/11 11:05:01

【算法】快速排序

算法系列六：快速排序一、快速排序的递归探寻 1.思路 2.书写 3.搭建 3.1设计过掉不符情况（在最底层时） 3.2查验能实现基础结果（在最底层往上点时） 3.3跳转结果继续往上回搭 4.实质二、快速排序里的基准排序 …...

编程日记 2025/9/11 16:05:37

Python快速入门指南：从零开始掌握Python编程

文章目录前言一、Python环境搭建🥏1.1 安装Python1.2 验证安装1.3 选择开发工具二、Python基础语法📖2.1 第一个Python程序2.2 变量与数据类型2.3 基本运算三、Python流程控制🌈3.1 条件语句3.2 循环结构四、Python数据结构🎋…...

编程日记 2025/9/11 11:52:58

机器学习中的数学（PartⅡ）——线性代数：2.1线性方程组

概述： 现实中很多问题都可被建模为线性方程组问题，而线性代数为我们提供了解决这类问题的工具。先看两个例子： 例子1： 一家公司有n个产品，分别是，生产上述产品需要m种原料，每个产品需要其中一…...

编程日记 2025/9/9 15:56:13

大模型上下文协议MCP详解（2）—核心功能

编程日记 2025/9/8 15:48:19

检测到目标URL存在http host头攻击漏洞

漏洞描述修复措施方法一： nginx 的 default_server 指令可以定义默认的 server 去处理一些没有匹配到 server_name 的请求，如果没有显式定义，则会选取第一个定义的 server 作为 default_server。 server {listen 80 default_server; …...

编程日记 2025/9/6 18:04:38

【 Beautiful Soup (bs4) 详解】

引言 Beautiful Soup 是 Python 最流行的 HTML/XML 解析库，能够从复杂的网页文档中高效提取数据。以下是其核心知识点及示例代码。一、库简介 1. 核心模块 BeautifulSoup：主类，用于构建文档树结构Tag：表示 HTML/XML 标签的对象…...

编程日记 2025/9/12 20:38:40

Cuto壁纸 2.6.9 | 解锁所有高清精选壁纸，无广告干扰

Cuto壁纸 App 提供丰富多样的壁纸选择，涵盖动物、风景、创意及游戏动漫等类型。支持分类查找与下载，用户可轻松将心仪壁纸设为手机背景，并享受软件内置的编辑功能调整尺寸。每天更新，确保用户总能找到新鲜、满意的壁纸。大小&am…...

编程日记 2025/9/11 8:00:18

人工智能之数学基础：复矩阵

本文重点复矩阵是线性代数中以复数为元素的矩阵，是实矩阵在复数域上的自然推广。与实矩阵相比，复矩阵在数学性质、运算规则和应用场景上具有独特性，尤其在量子力学、信号处理、控制理论等领域发挥关键作用。复矩阵的定义与表示定义：复矩阵指的是元素含有复数的矩阵。…...

编程日记 2025/9/9 12:00:54

numpy初步掌握

文章目录一、前言二、概述2.1 安装2.2 基础三、数组3.1 数组创建3.1.1 从已有数据创建3.1.2 创建特殊值数组3.1.3 创建数值范围数组3.1.4 随机数组生成3.1.5 其他 3.2 数组属性四、数组操作4.1 索引/切片4.2 数组遍历4.3 修改形状4.4 更多五、数组运算5.1 常规运算5.2 广播…...

编程日记 2025/9/13 3:58:48

unity曲线射击

b站教程 using UnityEngine; using System.Collections;public class BallLauncher : MonoBehaviour {public float m_R;public NewBullet m_BulletPre;public Transform m_Target;private void Start(){StartCoroutine(Attack());}private void OnDestroy(){StopAllCoroutine…...

编程日记 2025/9/12 21:03:32

Webpack中的文件指纹：给资源戴上个“名牌”

文件指纹到底是什么？

为何我们需要文件指纹？

Webpack中常见的指纹方式

1. Hash

2. Chunkhash

3. Contenthash

在Webpack中配置文件指纹

JavaScript文件

CSS文件

图片、字体等资源

最佳实践和一些纠正

总结

相关文章：