共计 1823 个字符，预计需要花费 5 分钟才能阅读完成。
一、前言
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-hashless2. 配置文件增加插件
/* .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…