webpack打包时,文件指纹的作用

于 2024-06-10 18:35:57 发布
阅读量301 收藏
点赞数 4
文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74545388/article/details/139580200
版权

当我们打包的时候,生成的js和css在前面会出现一堆东西

这些就称为文件指纹

当文件发生变化的时候,文件指纹也会发生变化,反之文件没有发生改变,文件指纹也不会变化

可以在webpack中配置不生成文件指纹,如果不生成文件指纹的话,会导致一个大问题

在浏览器中,浏览器首次会访问服务器请求css,js等代码(浏览器不会缓存html代码),放到浏览器缓存中,从而下次不在请求服务器,而是直接在浏览器缓存中拿到css,js等代码,如果不加上文件指纹,那么浏览器不知道css,js等代码已经发生改变,从而继续使用缓存中没有变化的css,js等代码,这就出现严重的问题

当有文件指纹的时候,当css,js等代码发生变化的时候,文件指纹也会发生变化,html文件中引入的css,js等代码的路径也会发生变化,导致浏览器重新请求服务器获得新的缓存,此时你的缓存设置多长时间都没有关系

这就是使用文件缓存的好处

码农的救赎
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack热跟新和文件指纹
qq_38850058的博客
06-01 181
一： 热跟新 1 watch 文件监听(非热跟新) watch文件监听是需要手动的刷新浏览器。页面才能刷新内容。因为他是轮询文件的最后修改时间是否变化，当文件发生变化时，不会立刻告诉监听者，而是先缓存起来等待aggregateTimeout //默认false，不开启 watch: true, // 只有开启监听模式，wacthOptions才有效 watchOptions: { /...
webpack-test:webpack-test
07-14
Webpack 是一个流行的JavaScript模块打包工具，它允许开发者将各种资源如JavaScript、CSS、图片等组织成模块，并将这些模块按照依赖关系打包成一个或多个可部署的静态资源。在"webpack-test"项目中，我们可以看到这...
webpack之文件指纹
liuhua_2323的博客
11-30 1121
什么是文件指纹 文件指纹是文件打包后输出的文件名的后缀，通常用来做一些文件的版本管理 如何生成 Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会更改 Chunkhash：和webpack打包的chunk有关，不同的entyr会生成不同的Chunkhash值（一个页面的值改变了并不会影响另一个页面，js文件一般采用此方法） Conte...
Webpack文件指纹
人生百年几今日，今日不为真可惜。
02-24 2232
文章目录什么是文件指纹文件指纹的作用文件指纹策略占位符介绍文件指纹的设置JS文件指纹设置图片文件指纹设置CSS文件指纹设置设置步骤文件指纹项目应用 什么是文件指纹 文件指纹是文件打包后输出的文件名的后缀，通常用来做一些文件的版本管理 文件指纹的作用 用作版本管理时，如果一个项目需要发布，只需要发布修改过的文件指纹； 对于没有修改过的文件，用户在访问的时候，依旧可以使用浏览器缓存好的，无需二次加载，加速页面访问。 文件指纹策略 Hash 和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash
Webpack中的文件指纹
越陌度阡
01-03 2087
1. 什么是文件指纹？文件指纹就是打包后输出的文件名的后缀，主要用来对修改后的文件做版本区分。 2. 文件指纹有哪几种？Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改，一般用于图片设置；Chunkhash：与webpack 打包的 chunk 有关，不同的 entry 会生成不同的 chunkhash 值，一般用于设置JS文件；Contenthash：根据文件内容来定义 hash ，文件内容不变，则 contenthash 不变.....
【webpack学习系列05】webpack文件指纹
长歌如梦夜
07-12 278
什么是文件指纹 ⽂件指纹是指打包后输出的⽂件名的后缀。 ⽂件指纹如何⽣成 Hash：和整个项⽬的构建相关，只要项⽬⽂件有修改，整个项⽬构建的 hash 值就会更改 module.exports = { entry: { index: './src/index.js', search: './src/search.js' }, output: { path: path.join(__dirname, 'dist') fil
详解webpack介绍&安装&常用命令
12-09
4. **插件系统**：Webpack 插件进一步扩展了其功能，允许开发者自定义构建流程，如 HTML 文件生成、代码压缩、资源指纹生成等。许多开源插件已经为各种常见需求做好准备。 5. **快速运行**：Webpack 利用异步 I/O ...
webpack-package
05-01
- **Plugin（插件）**: 扩展 Webpack 功能，执行更复杂的任务，如自动压缩、添加版权信息、文件指纹生成等。 - **Output（输出）**: 定义了打包后的文件结构和路径，包括输出的文件名、公共路径等。 - **Module...
深入使用webpack构建vue.js单页应用
01-27
- **样式打包**：使用`ExtractTextPlugin`将CSS提取为独立的文件，并可生成hash指纹，方便缓存控制。 - **HTML文件引入hash指纹**：借助`HtmlWebpackPlugin`，自动在HTML文件中插入带有hash的bundle和vendor链接。...
详解html-webpack-plugin使用
11-19
2. **动态添加哈希**：如果你在生产环境中使用了文件指纹（例如 hash 或 chunkhash），HTMLWebpackPlugin 会自动将这些哈希值添加到引入的 script 或 link 标签中，确保浏览器加载最新的资源，防止缓存问题。...
webpack之文件指纹策略
小葵坤_易安的博客
09-12 566
一、什么是文件指纹？ 打包后输出的文件名的后缀 用于做版本管理 二、文件指纹如何生成 Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改 Chunkhash：对于 JS 文件，和 webpack 打包的 chunk 相关，不同的 entry 会生成不同的 chunkhash 值 Contenthash：对于 CSS 文件，根据文件内容来定义 hash，文件内容不变，contenthash 不变 三、JS 的文件指纹设置 设置 output 的 filen
webpack文件指纹配置
仇益阳的博客
06-10 512
webpack文件指纹配置 主要用于做版本版本管理 文件如何生成？ Hash，Chunkhash，Contenthash js文件指纹设置 css文件指纹设置 图片或文件指纹设置
webpack 文件指纹的配置
态度决定一切
07-02 1044
执行前，先保证webpack项目能正常运行 关于hash值： Hash： 和整个项⽬的构建相关，只要项⽬⽂件有修改，整个项⽬构建的 hash 值就会更改。 Chunkhash： 和 webpack 打包的 chunk 有关，不同的 entry 会⽣成不同的 chunkhash 值。 Contenthash： 根据文件内容来定义 hash ，⽂件内容不变，则 contenthash 不变。 重命名 ...
webpack小白入门之文件监听，热更新，文件指纹，代码压缩【1-4】
weixin_30763397的博客
07-20 229
webpack中的文件监听 文件监听是在发现源码发生变化的时候，自动重新构建出新的输出文件。 webpack开启监听模式的两种模式： 启动 webpack 命令时候，带上 --watch 参数 package.json中配置如下: "scripts": { "build": "webpack --watch" }, 复制代码 上面方式有个缺陷，就是每次webpack更新代码，都要手动...
webpack之文件指纹如何生成
打伞的鱼
01-13 550
· Hash: 和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会更改 Chunkhash(JS文件): 和webpack打包的chunk有关，不同的entry会生成不同的chunkhash值 Contenthash(CSS文件):根据文件内容来定义hash，文件内容不变，则contenthash不变 图片的文件指纹设置使用[hash] 设置MiniCssExtratPlu...
webpack基础篇（十二）：文件指纹
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
06-22 1296
说明 玩转webpack课程学习笔记。 什么是文件指纹 打包后输出的文件名的后缀。 文件指纹如何生成 Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改 Chunkhash：和 webpack 打包的 chunk 有关，不同的 entry 会生成不不同的 chunkhash 值 Contenthash：根据文件内容来定义 hash ，文件内容不变，则 contenthash 不变 JS 的文件指纹设置 设置 output 的 filename，使用 [chu
Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案
weixin_34268169的博客
06-28 416
文件的hash指纹通常作为前端静态资源实现增量更新的方案之一，Webpack是目前最流行的开源编译工具之一，其强大的功能也带来很多坑（当然，大部分麻烦其实都可以在官方文档中找到答案）。 比如，在Webpack编译输出文件的配置过程中，如果需要为文件加入hash指纹，Webpack提供了两个配置项可供使用：hash和chunkhash。那么两者有何区别呢？其各自典型的应用场景又是什么？本文结合笔者工...
关于前端缓存中，指纹与查询字符串的区别
热爱思考、活力满满、开朗爱笑的年轻人
10-20 451
文章目录 Sprockets 把所有 JavaScript文件连接为一个主 .js 文件，把所有 CSS 文件连接为一个主 .css 文件。我们可以按需定制连接文件的方式。在生产环境中，Rails会在每个文件名中插入SHA256指纹，以便Web浏览器缓存文件。当我们修改了文件内容，Rails会自动修改文件名中的指纹，从而让原有缓存失效。 Sprockets只用指纹的方式是在文件名中添加文件内容的哈...
webpack 打包cshtml文件
最新发布
09-20
要使用webpack打包cshtml文件，你可以按照以下步骤进行操作： 1. 在根目录下创建一个名为index.cshtml的文件，将你的cshtml代码写入其中。 2. 在webpack的配置文件webpack.config.js中，修改entry属性，将index.cshtml添加为一个入口文件。例如：`entry: { index: './src/index.js', cshtml: './index.cshtml' }`。 3. 在plugins属性中添加一个HtmlWebpackPlugin实例，用于处理cshtml文件，并将其复制到输出目录中。例如： ``` new HtmlWebpackPlugin({ template: './index.cshtml', filename: 'index.cshtml', inject: false, chunks: ['cshtml'] }) ``` 4. 在output属性中，将filename配置为cshtml文件的输出文件名。例如：`filename: '[name].[contenthash:7].cshtml'`。 5. 运行`npm run dev`命令，webpack将会根据你的配置打包cshtml文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值