How to keep filename hashing when use .js as entry point?

Question

How I can keep filename hashing when I use my JavaScript file as entry point? It works only when I use HTML file.

💻 Code Sample

In package.json:

"scripts": {
  "watch:main": "parcel watch sources/packs/main.js -d static/dist/main/"
}

In main.js:

import './main.scss'

In main.scss:

.class {
  background-image: url('../assets/images/some.png');
}

Expected output:

static/
  dist/
    main/
      some.[hash].png
      main.[hash].css
      main.[hash].js

But:

static/
  dist/
    main/
      some.[hash].png
      main.css
      main.js

🌍 Your Environment

Software Version(s)
Parcel 1.12.3
Node 10.16.0
npm/Yarn npm 6.9.0
Operating System Mac OS

1 possible answer(s) on “How to keep filename hashing when use .js as entry point?

  1. Entrypoints don’t get named with a hash because then it wouldn’t be straightforward to reference them.

    Despite this inconvenience, the same benefits apply as including digests with non-entry bundles: the contents of the entry files don’t change on subsequent builds and deploys, and the bundles can be served with Cache-Control: Immutable or using a long max-age since the name guarantees the content of the file hasn’t changed.

    With webpack, tools like the HTML plugin can generate pages that include these names with digests. Also, in situations where another system is generating webpages (including at runtime like in Django or PHP), webpack (maybe through a plugin) can externalize a mapping of entry source to the complete bundle name, including the digest, and write it out as a json file during build. These systems can read that in and write the results into a script tag.

    One thing we could explore in Parcel 2 that I’ve been thinking about is producing one of these maps through a reporter, or even using a file indexing these entries as a single entrypoint to Parcel. Here’s a thought:

    Given app.parcelmanifest.json:

    {
      "src/a.js": null,
      "src/b.js": null
    }
    

    Running parcel build app.parcelmanifest.json could produce dist/app.parcelmanifest.json:

    {
      "src/a.js": "a.0a87f76e.js",
      "src/b.js": "b.9e7236b4.js"
    }
    

    This could all be done through the existing transformer infrastructure in Parcel 2 and avoid using a reporter or creating any new logic in core.