Clarify how to reference static files on the frontend from Webpack/Esbuild

[mtomov]

This is a 🔦 documentation change.

Summary

Provide examples for referencing static files with Esbuild and Webpack.

Context

Esbuild and Webpack have a slightly different strategy for referencing static files that are processed by them. Provide examples to ease use.

Alternatively, we can include those examples directly in the templates, optionally in a commented-out state.

Feel free to close PR if obvious or incorrect.

Thank you!

[jaredcwhite]

Thanks @mtomov for the submission. Can we move this to a separate section on that page which is related to globbing multiple asset files? I personally don't ever glob-import images through the frontend bundling pipeline, so I'd want to make it clear this is an entirely optional step. Also, we wouldn't ever want to console.log anything that's not truly a debug statement. I think simply referencing the variable in a loop (maybe like images.forEach(image => image)) would suffice.

[jaredcwhite]

@mtomov ~~Can confirm this does work for esbuild:~~

import images from "../images/**/*.{jpg,jpeg,png,svg,gif}"
images.forEach(image => image)

Actually that causes a runtime error -- this seems to work:

import images from "../images/**/*.{jpg,jpeg,png,svg,gif}"
Object.entries(images).forEach(image => image)

[mtomov]

Hi @jaredcwhite , indeed Object.entries(images).forEach(image => image) works!

[jaredcwhite]

@mtomov Awesome! Do you think you could make a quick update to the PR based on my two comments above? Then I shall gladly merge! ☺️

[mtomov]

Thanks @jaredcwhite . Just updated. Sorry for the delay