当前位置: 首页 > Web前端 > JavaScript

使用插件去除Parcel2打包文件的hash值

时间:2023-03-27 15:50:24 JavaScript

1.前言Parcel2的出现大大提高了打包的灵活性,但是parcel2打包的时候会根据依赖关系来决定是否给文件包裹文件和包裹的配置。添加唯一的哈希值。比如index.js打包后可能变成index.794a6267.js。那么如何根据我们的需要来决定是否添加哈希值呢?2.Parcel2contenthashing在parcel2的介绍中,有一个很重要的特性,就是contenthashing。它是做什么用的?Parcel在构建文件时,会根据文件内容自动生成哈希值,主要用于浏览器缓存。当你的文件内容发生变化时,哈希值也会随之变化,浏览器会加载最新的文件。如果哈希值没有改变,浏览器将使用缓存的文件。默认情况下,parcel会自动为依赖文件添加相应的哈希值。除了一些入口文件如index.html或依赖库文件,需要稳定的文件名,不会添加hash值,parcel会自动添加其他文件。判断是否需要添加哈希值。如果想每次打包都保持文件名固定,可以在parcel打包命令后加上--no-content-hash:"build:popup":"parcelbuildsrc/index.html--no-source-maps--no-content-hash"但是这种方法并没有去掉文件名后面的hash值,只是保持hash值不变。3、为什么要去掉hash值一般情况下,比如我们用vue或者react来写web端网站。这种单页应用往往只有一个入口文件,其他的css或js都在framework层,会被删除。经过处理,我们不需要关心这些文件打包后的名字,所以这些文件都加上了hash值,对缓存更友好,我们也不需要关心了。但是还有一种情况。当我们不是简单的写网页的时候,我们可能会写一个webextension,或者其他的工具等等,这些东西的文件结构往往是比较固定的,都有官方要求的配置文件。您明确指定每个功能对应的文件名(如wen扩展名)。在这种情况下,我们无法为这些文件添加哈希值,即使哈希值始终是固定的,但由于我们无法预测哈希值是什么,因此我们无法在配置文件中写入固定的文件名。4.插件系统Plugin针对这种情况,parcel提供了一种解决方案。如果parcel自动生成的文件名不能满足要求,可以通过plugin修改每个打包后的文件名。Parcel将插件分为很多模块,包括transformers(比如转换Vue文件)、Namers(处理文件名)等,每个plugin负责不同的功能和执行时序。Namers插件在打包完成后执行,可以自定义修改文件名。Namers插件使用方法如下:在.parcelrc文件中,添加namers字段,然后添加插件名称(必须扩展一个基础插件@parcel/config-default)/*.parcelrc*/{"extends":["@parcel/config-default"],"namers":["parcel-namer-hashless"]}四、使用parcel-namer-hashless插件去除hash值。parcel-namer-hashless是一个没有冗余配置的。安装后可以在parcel中使用打包文件后,去除所有文件哈希值的插件。使用:1.安装npminstall--save-devparcel-namer-hashless2。配置文件添加插件/*.parcelrc*/{"extends":["@parcel/config-default"],"namers":["parcel-namer-hashless"]}3.如果打包后的文件是index.html入口,在package.json中添加source字段/*package.json*/{"source":"src/index.html"}4.如果您处于开发模式,插件不会删除文件的哈希值,它只会在构建时删除5。当插件成功运行时,它将打印以下消息parcel-namer-hashless:index.794a6267.js->index.js如果这个插件对你有帮助,欢迎star或者提交issuehttps://github.com/gxy5202/pa...