Parcel: 🙋 how to keep html name

Created on 15 Dec 2017 · 17Comments · Source: parcel-bundler/parcel

<!DOCTYPE html>
<html>
<head>
    <title>home page</title>
  <script src="./scripts/index.js"></script>
</head>
<body>
    <img src="./images/logo.png">

    <a href="page.html">Link</a>
</body>
</html>

this page will compile to

<!DOCTYPE html>
<html>
<head>
    <title>home page</title>
  <script src="/dist/c4f6ff1a9fe4f3634b9272ba1ddaaf50.js"></script>
</head>
<body>
    <img src="/dist/98d8f0da23c4c8c6fe7083e3f62c1fdf.png">

    <a href="/dist/2f84526286378f5180fc0841e2f1a1d9.html">Link</a>
</body>
</html>

I want to keep html name, my expectation：

<!DOCTYPE html>
<html>
<head>
    <title>home page</title>
  <script src="/dist/c4f6ff1a9fe4f3634b9272ba1ddaaf50.js"></script>
</head>
<body>
    <img src="/dist/98d8f0da23c4c8c6fe7083e3f62c1fdf.png">

    <a href="/dist/page.html">Link</a>
</body>
</html>

Please tell me how to config ?

| Software | Version(s)
| ---------------- | ----------
| Parcel | 1.2.0
| Node | 1.2.1
| npm/Yarn |
| Operating System | macos

Good First Issue Feature

Source

songlipeng2003

👍16

Most helpful comment

Would it be possible to completely disable file name hashing with an option (to the cli)?

eirikb on 17 Jan 2018

👍28

All 17 comments

this is somewhat related to https://github.com/parcel-bundler/parcel/pull/270

philipodev on 15 Dec 2017

This shouldn't be a hard fix, related code:
https://github.com/parcel-bundler/parcel/blob/c008bb0ac492dbac38e2f13017e3143f40359934/src/Asset.js#L146-L166

DeMoorJasper on 15 Dec 2017

Should I include this in my change ?

ssuman on 15 Dec 2017

@ssuman if you want, go for it :)

DeMoorJasper on 15 Dec 2017

Sure will include this in my PR.

ssuman on 15 Dec 2017

👍1

In assetgraph-builder we also hash filenames, but exclude any files matching the following from renaming:

Any graph entry point (usually html)
Any asset linked to with an <a href>
Any asset linked to with a <meta http-equiv="refresh">
Serviceworkers (must keep consistent file name across builds)
humans.txt, robots.txt, '.htaccess`
Cache manifests, rss and atom feeds
favicon.ico

More rules might need to be added in the future of course, but these ones have covered us well for a couple of years

Munter on 26 Dec 2017

👍4

Would it be possible to completely disable file name hashing with an option (to the cli)?

eirikb on 17 Jan 2018

👍28

@eirikb this will be hard as it will not be prone to overwriting. For example index.js and ./src/somefolder/index.js will both be saved to index.js but they should be different bundles. However it might be possible to use a relative path and use that to write bundles into a directory tree similar to the source one. I'm not sure what the specific usecase for this is though.
Also for production this seems like a bad strategy, as the bundle names can and probably will in the future invalidate cdn and browser cache by changing the name of the bundle based on content.

DeMoorJasper on 17 Jan 2018

@DeMoorJasper the use case is having an actual site with human/SEO filenames, e.g.

example.com/
example.com/about.html
example.com/contacts.html

instead of

example.com/
example.com/98d8f0da23c4c8c6fe7083e3f62c1fdf.html <-- this looks so spammy
example.com/2f84526286378f5180fc0841e2f1a1d9.html

fregante on 22 Jan 2018

👍14

Having pages that can be linked to from the outside because of predictable URL' s is a pretty big use case. It's the core functionality of the web

Munter on 22 Jan 2018

👍14 🎉2

I kinda got aff-topic with my comment, talking about duplicates mainly focusing on javascript and such.
Anyways i understand the issue completely and agree this is a big issue. What do you guys think about something like this: (Pseudocode as explanation)

// HTML Asset getBundleName()
if (this.parent === null || this.parent.type === 'html') {
  // Only keep name if it's the main bundle or it's being required from html (for example through <a href=...
  // As this might possibly break if html is being used as a template inside JS, TS,...
  return path.join(this.relativePath, this.name);
}

This should only happen in htmlAssets (and maybe rawAsset - pictures and such) as far as i know

DeMoorJasper on 22 Jan 2018

@DeMoorJasper If you only look at the parent, you'll get a bunch of static assets that could easily be content addressable, but keep their non-hashed file name. When you are finding the edges in the graph are you not also recording the type of edge it is? This is highly valuable information for knowing what to rename under which circumstances.

The rule about keeping names on entry points and anything pointed to by an html anchor is good. But there are a few more quite important assets not to rename. See https://github.com/parcel-bundler/parcel/issues/280#issuecomment-353894742

Munter on 22 Jan 2018

👍3

Will this give me friendlier filenames to use with Angular 1.x directive templateUrl? Or, please point me to an example, as I can't find any.

opyate on 28 Feb 2018

Should be solved by #1025 which retains filenames and folder structure for linked files, and content hashes static assets. Please help test using the master branch - a release will hopefully come next week!

devongovett on 21 Mar 2018

In assetgraph-builder we also hash filenames, but exclude any files matching the following from renaming:

Any graph entry point (usually html)

Any asset linked to with an <a href>

Any asset linked to with a <meta http-equiv="refresh">

Serviceworkers (must keep consistent file name across builds)

humans.txt, robots.txt, '.htaccess`

Cache manifests, rss and atom feeds

favicon.ico

More rules might need to be added in the future of course, but these ones have covered us well for a couple of years

Hi,

You mention rss and atom feeds - do you know what the naming convention should be used to ensure these files are ignored?

Currently I am producing a rss.xml and atom.xml and both of these are being hashed.

HowardvanRooijen on 2 Jun 2020

I can only speak to what we did in assetgraph-builder. There we infer the asset type from the way it is marked up as a <link rel="alternate"> with a type attribute: https://github.com/assetgraph/assetgraph/blob/v6/lib/assets/Html.js#L477-L486

If you were to just anchorlink to the xml file it would just be inferred as an xml file with no special significance.

From looking at https://github.com/parcel-bundler/parcel/blob/master/packages/core/parcel-bundler/src/assets/HTMLAsset.js I can't see any similar special categorization of feeds and indeed https://github.com/parcel-bundler/parcel/tree/master/packages/core/parcel-bundler/src/assets also doesn't seem to have have any special handling. So in Parcel your feed is probably just treated equally to any other static asset with no special handling to keep urls stable

Munter on 3 Jun 2020

❤1

I currently have the following markup:

<link rel="alternate" type="application/atom+xml" href="/atom.xml" />
<link rel="alternate" type="application/rss+xml" href="/rss.xml" />

Which is being transformed into:

<link rel="alternate" type="application/atom+xml" href="/atom.c4df4b4f.xml">
<link rel="alternate" type="application/rss+xml" href="/rss.9a4ebc87.xml">

Which is less than ideal. I've read everything I could find, but I've not found a way to exclude these files. Any suggestions?

Many thanks!

HowardvanRooijen on 4 Jun 2020

👍3

Was this page helpful?

0 / 5 - 0 ratings