[v5] How to import files with dynamic hashes in views?

[ghosh]

I have a few files with dynamically generated hashes for cache busting. For example, app.dd0b2976.js, styles.884afe5a.css.

How would i go about importing these files into a view? Without having to manually add the hash every time.

<link rel="stylesheet" href="/assets/styles.884afe5a.css" />
<script type="module" src="/assets/app.dd0b2976.js"></script>

[RomainLanz]

Hey @ghosh! 👋🏻

Depending on the system you use to generate those hash, you should have a helper to handle those.

[ghosh]

Thanks for the fast reply @RomainLanz

I am using the backend integration feature of Vite which generates a manifest.json file. It looks something like this:-

{
  "src/main.tsx": {
    "file": "assets/main.dd0b2976.js",
    "src": "src/main.tsx",
    "isEntry": true,
    "imports": [
      "_vendor.884afe5a.js"
    ]
  },
  "_vendor.884afe5a.js": {
    "file": "assets/vendor.884afe5a.js"
  }
}

The suggested way to use it is like:-

<script type="module" src="/assets/{{ manifest['main.js'].file }}"></script>

I tried like this, but it does not work in edge.