--no-content-hash or something else ? (don't touch the assets please)

[Inateno]

❔ Question

Hello!

I've searched all along but I don't see anything that really answer the question (or the problem).

I want to take benefit of the --no-content-hash but the console say unknown option --no-content-hash'` and I tried with the 'build' command and it make the (nearly) same output, files are still hashed.

I use the plugin parcel-plugin-asset-copier

Here are my full commands:
Dev: "dev:local": "cross-env parcel html/index-dev.html --no-autoinstall --port 8081 -d dist/dev/ --cert ssl/localhost.crt --key ssl/localhost.key",
Prod: "build": "cross-env parcel build --no-content-hash html/index-dev.html -d dist/prod/"

So far so good (without the --no-content-hash) but the problem is that every single assets used by html/css is hashed and throw in the dev/ folder, while I also have every assets in my /assets/ sub repos.

So I have fonts, icons, etc.
And also got them in /assets/.

Maybe that something we will be able to do in Parcel 2? (I'm on LTS projects only..)

🔦 Context

I would like that parcel do not modify resources that way I can keep them in the folder.
It's not "clean" that way and we have several builds on the server using the same resources.
Also, each templates (and JS) are using images, so I can't just "delete" my assets folders, as it is now, parcel put some images in the dist/, and I have duplicates in assets/ and both are used...

🌍 Your Environment

Last parcel 1.12.4
parcel plugin asset copier: 1.0.0

[Grawl]

That's the problem for me too. I want to not hash images referenced in CSS because I am trying to not change some old project, just rebuild CSS in-place with Parcel.

Now I got structure like this:

templates
  default
    style.css
    images
      arrow.png

and I want to make it like this:

templates
  default
    style.styl
    images
      arrow.png

but Parcel fails on compiling it because style.styl now contains broken URLs like background: url(/path/to/server/folder/some.jpg). I fixed all of them, but now I have all referenced images in dist folder I set to templates/default to override style.css when I will build it on server. So I got this:

templates
  default
    style.css
    arrow.b5776194.png
    images
      arrow.png

But do not want to change URLs in style.css.

Maybe we can configure or disable this feature in Parcel?

I found parcel-plugin-disable-loaders but it can disable only one of css/html/js/wasm but not url-loader or something.

Also I found this comment in #1186 but commenting out all style.define('url', node => {}) hook didn't help me.

And finally, I found a plugin that monkey-patches original Parcel code, so we can find a workaround on how to disable assets copying: parcel-plugin-bundle-deep-hash

In sources, there is following thing:

const Bundle = require('parcel-bundler/src/Bundle');
module.exports = function (bundler) {
    Object.assign(Bundle.prototype, {
        // here you can re-define methods from node_modules/parcel-bundler/src/Bundle.js
    });
};

There is no public repository of this plugin but you can browse code published in NPM using npmfs: https://npmfs.com/package/parcel-plugin-bundle-deep-hash

So, I copied getHashedBundleName here and now I can control how hashes is added. Maybe I will release a plugin that fixes this issue by monkey-patching.

[Grawl]

i will just get Gulp for now

[Inateno]

As I needed this for some electron builds and others here is my tip.
Just do a script tag in your html page that will load the CSS, and put the CSS files into the assets folder.

Or second option, you add the CSS lines with a bash or node script after parcel processed.

No the best tho but still effective.

[Grawl]

also this issue is not a question but a feature request

[Inateno]

The doc mention this so it's an issue as this does nothing so far ^^

[Inateno]

I also cannot use webfonts in PROD via CSS @font-face rules, because all the font filename are hashed.

Yeah it's a big pain in the ass for those who do custom stuff by hand and not the mainthread techs :p

But you can find different loaders for differents things, also what I've done to one of my project I build with Electron (and parcel just DIE if I put the script in reference LOL) it's to load custom files with a JS script, adding the tag in the DOM will do the job you are looking for, but in some cases you might need an extra script in your package to build those "detached" files.

Waiting for parcel2 should resolve A LOT of those problems (hopefully !)

[freehuntx]

This problem is frustrating me since parcel 1 and still in parcel 2.
This is one of 2 points why i aaaaalways when i try out parcel have to switch back to fusebox or webpack.
Because parcel does things and makes it reeeeally really hard to undo these things.
Sorry @Inateno but this problem still persists in Parcel 2 and will stay forever i guess.

But dont worry. You can create a npm package which MUST begin with "parcel-namer-" and add it to a config.
Oh why you cant add it from a local folder? Because your life is otherwise a bit too easy... Sad. Really sad...

[EvanDarwin]

Parcel is essentially unusable for Shopify projects. Guess I'm going to use webpack then. 👍 This issue.

[basher]

I have a (temporary) workaround...

I wrote a Node script to remove the hash from Parcel-bundled SVG sprites, so I can reference the sprites directly in the HTML or from JS-generated markup in components like sliders & accordions.

Our production build & deploy process manages versioning of static assets (CSS/JS, and SVG) so I don't need to retain any hashes that Parcel generates.

[devongovett]

You can solve this with a custom namer plugin: https://v2.parceljs.org/plugin-system/namer#content. This gives you complete control over the file naming of all bundles produced by parcel.

[devongovett]

Also --no-content-hash is already supported in v2, though it doesn't remove the hash entirely just the "content" part of the hash.

[basher]

Thanks... but I'm not sure what you mean by removing just the "content" part of the hash? ;)

I've looked at the docs for namer plugins... sorry, but I still don't understand how to author one and use it? Can an example be added to namers folder?

[mischnic]

This line ultimately adds the hash: name += "." + bundle.hashReference;

https://v2.parceljs.org/plugin-system/namer#including-a-hash

So removing this line would never add a hash:

parcel/packages/namers/default/src/DefaultNamer.js

Line 99 in 891f661

name += '.' + bundle.hashReference;

But one problem is that you still need to generate a unique name for each bundle (which is rather difficult without using hashes for shared bundles).

[BasicallyMe]

This has been a headache for almost 5 days. I'm trying to make a carousel of images using plain JS, but every time I run the code to change the image, Voila - the image doesn't load. So I tried to console.log to check the URL of the original image (which is present locally in the assets folder), referenced in the index.html file, and there I see this hash being added to the name of the image file. Now I'm not sure whether Parcel adds the hash to the URL, after I change it in JS, because no matter how many times I check the image doesn't get reference and it just doesn't load.

<div class="avatar-container"> <img src="assets/avatar/avatar-1.jpg" alt="Picture of a person"> </div>

const setImage = (avatar, image) => { console.log('test🐸'); const avatarImage = avatarContainer.querySelector('img'); avatarImage.src = avatar; // console.log(avatarImage); }

Here avatar is the relative path passed to the function.