一、前言

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...