Treat image set as href target as an asset instead of entry point

[bre7]

❔ Question

Can images that are the target of an anchor link be bundled treated like assets instead of entry points by Parcel ?

🔦 Context

Since assets are moved to the root of the site by Parcel, I would like to do the same with other images. In this case, full-size images aren't displayed on the website but instead displayed only to users that click on the thumbnail (using Photoswipe).

💻 Code Sample

<a href="images/foo.jpeg" itemprop="contentUrl">
    <img src="images/foo_400w.jpeg">
</a>

Both foo_400w.jpeg & foo.jpeg should be in the same location.

🌍 Your Environment

Software	Version(s)
Parcel	1.9.7
Node	10.6.0
npm/Yarn	1.9.4
Operating System	depends

[DeMoorJasper]

This should already work? Is this inside html or Javascript?

Inside javascript you should use require(...) inside html it should already work, you could try with ./images... to be more explicit but it should work

[bre7]

HTML. Parcel will only bundle hash the 400w image (using parcel-plugin-lazy). But the folder structure of "images/foo.jpeg" will remain unmodified after building.

Result:

<a href="/images/foo.jpeg" itemprop="contentUrl">
    <img src="/foo_400w.HASH.jpeg">
</a>

Expected

<a href="/foo.HASH.jpeg" itemprop="contentUrl">
    <img src="/foo_400w.HASH.jpeg">
</a>

or

<a href="/images/foo.jpeg" itemprop="contentUrl">
    <img src="/images/foo_400.HASH.jpeg">
</a>

[DeMoorJasper]

Could you try without the plugin?

It's probably an issue with the plugin

[bre7]

Did. With, without plugins the result is the same: only foo_400w.jpeg is hashed and foo.jpeg will remain in images/gallery/ dir. See example: https://github.com/bre7/parcel-demo-1917 (includes demo dist)

[DeMoorJasper]

Ow it actually creates the output dir and everything, that's pretty strange

[bre7]

Isn't it expected ? https://github.com/parcel-bundler/parcel/pull/1025 states:

a hash of bundle content is appended to names of files that aren't entry points (e.g. HTML files, things linked to a , service workers, etc.).

I thought a workaround was needed to avoid it.

Yeah it is as a tags are handled without hashing for SEO and such.

Not sure how to resolve this tbh.

I originally thought it just didn't copy to the dist and gave a 404

[bre7]

Possible solution:

By default: "things linked to a" aren't hashed Opt-in: Either a flag to enable/disable. Or better yet, add a list of extensions that should be treated as an asset instead of an entrypoint (e.g: html, etc...)

Set nonEntrypointAssetExtensions to "*" by default. If it's not, use it's values to check if the href includes an asset listed in the attribute or not.

[DeMoorJasper]

@bre7 Alright I'll change this to a feature request not sure if this actually should be the case.

[bre7]

I think the initial idea of "things linked to a" should not be treated as assets was too broad. I'd say 80-20 images linked by anchors tags should be treated as assets (no need for extra flags).

[bre7]

Follow up: Jasper, I think this is resulting in non-existent entry points.

Minimal example: https://github.com/bre7/parceljs-issue-1917-v2

parcel build --no-cache --detailed-report 10 --no-source-maps dev/index.html

Result:

√ Built in 1.64s.

dist\images\gallery\3.jpeg 88.05 KB 879ms dist\images\gallery\2.jpeg 65.82 KB 806ms dist\images\gallery\1.jpeg 30.05 KB 745ms dist\images\gallery\4.jpeg 25.75 KB 769ms dist\index.html 2.11 KB 639ms dist\images\gallery\1.js 1.1 KB 747ms dist\images\gallery\2.js 1.1 KB 807ms dist\images\gallery\3.js 1.1 KB 881ms dist\images\gallery\4.js 1.1 KB 770ms Done in 3.00s.

Expected:

√ Built in 1.64s.

dist\images\gallery\3.jpeg 88.05 KB 879ms dist\images\gallery\2.jpeg 65.82 KB 806ms dist\images\gallery\1.jpeg 30.05 KB 745ms dist\images\gallery\4.jpeg 25.75 KB 769ms dist\index.html 2.11 KB 639ms Done in 3.00s.

❌ 1.js / 2.js / 3.js / 4.js don't exist. They are created by Parcel for some reason 😕