Webpack文件指纹
文章目录
- 什么是文件指纹
- 文件指纹的作用
- 文件指纹策略
- 占位符介绍
- 文件指纹的设置
- JS文件指纹设置
- 图片文件指纹设置
- CSS文件指纹设置
- 设置步骤
- 文件指纹项目应用
什么是文件指纹
文件指纹是文件打包后输出的文件名的后缀,通常用来做一些文件的版本管理
文件指纹的作用
- 用作版本管理时,如果一个项目需要发布,只需要发布修改过的文件指纹;
- 对于没有修改过的文件,用户在访问的时候,依旧可以使用浏览器缓存好的,无需二次加载,加速页面访问。
文件指纹策略
Hash
和整个项目的构建相关,只要项目文件有修改,整个项目构建的hash值就会更改,并且全部文件都共用相同的hash值
Chunkhash
和webpack打包的chunk有关,不同的entyr会生成不同的Chunkhash值(一个页面的值改变了并不会影响另一个页面,js文件一般采用此方法),chunkhash和hash不一样,它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响。
Contenthash
根据文件内容来定义hash,文件内容不变,则contenthash不变(css文件一般采用此方法)。
比如文件index.css被index.js引用了,所以共用相同的chunkhash值。但是这样子有个问题,如果index.js更改了代码,css文件就算内容没有任何改变,由于是该模块发生了改变,导致css文件会重复构建。
这个时候,我们可以使用extra-text-webpack-plugin里的contenthash值,保证即使css文件所处的模块里就算其他文件内容改变,只要css文件内容不变,那么不会重复构建。
hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值。如果文件内容改变的话,那么对应文件哈希值也会改变,对应的HTML引用的URL地址也会改变,触发CDN服务器从源服务器上拉取对应数据,进而更新本地缓存。但是在实际使用的时候,这几种hash计算还是有一定区别。
占位符介绍
占位符名称 | 定义 |
---|---|
[ext] | 资源后缀名 |
[name] | 文件名称 |
[path] | 文件的相对路径 |
[folder] | 文件所在的文件夹 |
[contenthash] | 文件的内容hash,默认是md5生成 |
[hash] | 文件的内容hash,默认是md5生成 |
[emoji] | 一个随机的指代文件内容的emoji |
文件指纹的设置
根据不同的文件类型一般选择不同的文件指纹策略,通常情况下:
- JS文件采用[chunkhash]文件指纹策略
- CSS文件采用[contenthash]文件指纹策略
- JS文件采用[hash]文件指纹策略
下面我们来介绍下几种用法
JS文件指纹设置
设置output
的filename
,使用[chunkhash]
,chunkhash
没办法和热更新一起使用的,不能与HotModuleReplacementPlugin
这个插件一起使用,所以我们只在生产环境写。
output: { //打包输出文件path: path.join(__dirname, 'dist'),filename: '[name]_[chunkhash:8].js' //chunkhash指纹策略,截取前面8个字符}
图片文件指纹设置
设置file-loader
的name
,使用[hash]
。
module: {rules: [{test: /.(png|jpg|gif|jpeg)$/,use: {loader: "url-loader",options: {name: '[name]_[hash:8].[ext]',limit: 10240 //不超过10K时,将其转化为base64}}},},
CSS文件指纹设置
CSS文件指纹策略比较特殊,我们需要用到MiniCssExtractPlugin
,设置MiniCssExtractPlugin
的 filename
,使用[contenthash]
。
正常情况下,如果我们使用了style-loader
和css-loader
的话,那么这个css
会由style-loader
将css
插入到style
里面,并且放到head
头部,此时并没有一个独立的css
文件,因此,我们通常会采用MiniCssExtractPlugin
,通过这个插件把这个style-loader
的css
提取成一个独立的文件,所以,对于这个css
的文件指纹,我们会设置在这个MiniCssExtractPlugin
里面,给它设置一个filename
,并且给它设置一个[contenthash]
。
注意:
MiniCssExtractPlugin
这个插件没办法与style-loader
一起使用,因为它们之间的功能是互斥的,所以需要将style-loader
换成MiniCssExtractPlugin.loader
。
设置步骤
首先安装MiniCssExtractPlugin
npm i -D mini-css-extract-plugin
配置webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); ...... module.exports = {plugins: [new MiniCssExtractPlugin({filename: '[name][contenthash:8].css'})], }
文件指纹项目应用
将webpack.config.js
文件更名为webpack.dev.js
并将内部的mode
修改为development
,再复制一份文件,更名为webpack.prod.js
将mode
修改为production
。
然后需要修改配置文件package.json区分production和development
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config webpack.prod.js","watch": "webpack --watch --progress","dev": "webpack-dev-server -config webpack.dev.js --open"}
完成上述步骤,我们在项目中就可以根据生产环境和开发环境不同,配置不同的文件指纹。
Webpack文件指纹相关推荐
- Webpack中的文件指纹
1. 什么是文件指纹? 文件指纹就是打包后输出的文件名的后缀,主要用来对修改后的文件做版本区分. 2. 文件指纹有哪几种? 1. Hash:和整个项目的构建相关,只要项目文件有修改,整个项目构建的 h ...
- webpack文件配置
目录 1.mode 2.devtool 3.entry 4.output webpack提供的 CLI 支持很多的参数,例如 --mode,但更多时候我们会使用配置文件来控制webpack的行为.默认 ...
- webpack文件夹打包_webpack多入口文件页面打包详解
本文主要介绍了webpack多入口文件页面打包配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望帮助到大家. 大多数情况下,我们使用 webpack来打包单页应 ...
- webpack——文件和图片打包
file-loader 命名参数列表: 配置webpack.config.js如下: 运行webpack打包输出如下: url-loader url-loader 用法与file-loader相似,可 ...
- 文件指纹修改工具 Hash Modifier
指纹修改工具 前言 介绍 细节 截图示例 代码 测试 前言 众所周知,每个人都有独一无二的指纹.与之类似,在计算机世界里,文件也可以通过一些貌似很复杂的算法(常见的MD5, SHA-1等),得到一个序 ...
- webpack文件压缩
webpack中相当于是实现了HTTP压缩的第一步操作,我们可以使用CompressionPlugin. 第一步,安装CompressionPlugin:npm install compression ...
- linux md5sum获取文件指纹数值并使用cut切割
echo "hello world"|md5sum 6f5902ac237024bdd0c176cb93063dc4 -echo "hello world"|m ...
- webpack文件夹打包_webpack打包图片没有出现在dist文件夹中
loader配置如下 { test: /\.(png|jpg|gif)$/i, use: [ { loader: "url-loader", options: { limit: 1 ...
- webpack打包js文件
Webpack安装 全局安装 npm install -g webpack webpack-cli 安装后查看版本号 webpack -v 初始化项目 创建webpack文件夹 进入webpack目录 ...
最新文章
- 【leetcode】力扣刷题(1):两数之和(Go、Python)
- js表单验证,如果不为空时自动改变提交按钮的背景色
- linux内核 asmlinkage宏
- attention mechanis 的数学理解
- vs2022 qt环境搭建调试
- 2019年第十届蓝桥杯 - 省赛 - C/C++大学B组 - A. 组队
- Require Busy dialog
- Spring 经典高频面试题
- 使用jquery获取ul中当前正在点击的li的索引
- python龙卷风框架_WEB框架之Tornado
- SPSS图文教程:正态转换的多种方法
- 逆向分析学习入门教程
- 计算机硬件的组装实践,论文-计算机硬件组装实践.doc
- 马踏棋盘问题的程序c语言,C语言马踏棋盘
- 测试公总号加入微信开放平台
- Java实现替换Word中文本
- 【架构师技能篇】Worker初识
- 十只老鼠在1000瓶药水中找一瓶有毒的
- js:字符串(string)转json
- Simulink中的SIL实现方式
热门文章
- Ubuntu16.04 查看硬盘序列号以及系统版本与安装时间
- python 成语接龙
- 细谈JVM垃圾回收与部分底层实现
- UltraEdit 27.0.0.24 中文版 — 文本代码编辑工具
- R语言 回归结果中有NA
- 突破NVIDIA NVENC并发Session数目限制
- 计算机网络 之 DNS (Domain Name System)域名服务器
- 【VC++游戏开发#六】2D篇 —— 粒子系统(一):浪漫唯美的场景之雪花飞舞
- There are 2 audio listeners in the scene.的问题
- 已解决,selenium 接管浏览器问题