一、前言
Parcel2 的问世,极大进步了打包的灵便度,然而 parcel2 在打包时,会依据打包文件的依赖关系和 parcel 的配置,决定是否给文件增加惟一的 hash 值。例如 index.js
打包后可能会变成index.794a6267.js
。那么如何依据咱们的须要决定是否要加上 hash 值呢?
二、Parcel2 content hashing
在 parcel2 的介绍中,有个重要的个性,就是content hashing
。它是干什么的呢?Parcel 在 build 文件时,会主动依据文件内容生成 hash 值,次要是为了给浏览器做缓存应用。当你的文件内容发生变化后,hash 值也会相应变动,浏览器就会加载最新的文件。如果 hash 值没有发生变化,则浏览器会应用缓存的文件。
默认状况下,parcel 会主动给依赖的文件加上对应的 hash 值,除了一些入口文件如 index.html 或者依赖库文件等,须要稳固的文件名,不会增加 hash 值外,其余文件 parcel 会主动判断是否须要增加 hash 值。
如果你想在每次打包时使文件名固定,能够在 parcel 打包命令后加上--no-content-hash
:
"build:popup": "parcel build src/index.html --no-source-maps --no-content-hash"
但这种形式并不会去掉文件名后的 hash 值,而只是让这个 hash 值始终不会变动。
三、为何须要去掉 hash 值
个别状况下,比方咱们用 vue
或者 react
写 web 端的网站,这种单页利用,往往就 1 个入口文件,其余的所有 css 或者 js 都是在框架层之中会被解决掉,咱们也不须要关怀这些文件打包后的名称,所以这些文件都被加上 hash 值,对于缓存更敌对,咱们无需再去关怀。
但存在另一种状况,当咱们不是单纯的写 1 个网页,可能是写一个web extension
,或者其余工具等,这些货色的文件构造往往都是绝对固定的,且存在官网要求的配置文件,须要你明确指定每个性能对应的是什么文件名(比方 wen extentsion)。那么这种状况咱们就不能给这些文件加上 hash 值,即便这个 hash 值始终是固定的,但因为咱们无奈预知这个 hash 值是什么,所以在配置文件中咱们就没法写固定的文件名了。
四、插件零碎 Plugin
针对这种状况,parcel 提供了一种解决方案,如果对于 parcel 主动生成的文件名无奈满足需要,则能够通过 plugin 来批改每个打包后的文件名。parcel 将 plugin 分为了许多模块,有 transformers
(比方针对 vue 文件做转换),有Namers
(针对文件名做解决) 等等,每个插件负责的性能不同,执行机会也不同。Namers
插件就是在打包实现后执行的,容许你自定义批改文件名。
Namers 插件应用办法如下:
在 .parcelrc
文件中,增加 namers
字段,而后增加插件名称(必须要 extends
一个根底插件 @parcel/config-default
)
/* .parcelrc */
{"extends": ["@parcel/config-default"],
"namers": ["parcel-namer-hashless"]
}
四、应用 parcel-namer-hashless 插件去掉 hash 值
parcel-namer-hashless 是 1 个无需多余配置,装置后即可在 parcel 打包文件后,去掉所有文件 hash 值的一个插件。
应用:
1. 装置
npm install --save-dev parcel-namer-hashless
2. 配置文件增加插件
/* .parcelrc */
{"extends": ["@parcel/config-default"],
"namers": ["parcel-namer-hashless"]
}
3. 如果打包的文件是 index.html
入口,在 package.json
中增加 source
字段
/* package.json */
{"source": "src/index.html"}
4. 如果你处于 development
模式中,插件不会去掉文件 hash 值,只会在 build
时去掉
5. 当插件胜利运行时,会在终端打印以下信息
parcel-namer-hashless: index.794a6267.js -> index.js
如果这个插件对你有帮忙,欢送 star 或提 issue
https://github.com/gxy5202/pa…