Bundle React code (with Images, CSS etc.) into a single HTML file to then use in an iframe

[zaini]

A have a simple React app that imports a PNG, uses some CSS etc.

I want to bundle it all into a single HTML file, so that I use it within an iframe. This means all the React code + CSS + Images are all inline.

How is this possible with Parcel?

This post seems similar, but it's for a single JS file: #7714

Maybe I'm not understanding what this post (https://parceljs.org/features/bundle-inlining/) is suggesting, but I don't want to have to rewrite my CSS or image imports to include data-url: or bundle-text:

I was able to inline the JS code within the HTML using the snippet below, but the CSS/Images which I import within React are not included in the single HTML file and are separate assets in thedist bundle.

    <script type="module">
        import "./index.js"
    </script>