Bundle ".wasm" in HTML file

[mattiaferrari02]

I need to bundle all my js code in a single html file.
To achieve that I'm using "html-inline-script-webpack-plugin".
It turns out that one of my deps in node_modules now uses WebAssembly and now when i run "webpack --mode production" I obtain an HTML file + a ".wasm" file.
Is there a way to pack also the wasm file in html

[alexander-akait]

Can you clarify? What do you mean pack? Can you provide configuration which you use right now?

[matthiasgeihs]

I mean something like asyncWebAssemblyInline: true. And then, when writing import factorial from "factorial.wasm";, WebPack generates code that inlines the WASM (like with asset/inline), and loads the WASM module from the inlined WASM (instead of trying to fetch it from the server). Does that make sense?

[alexander-akait]

Sorry for delay, you a loader for such purposes. Why you need this, because some optimizations are impossible in the such case

[matthiasgeihs]

We have been running into problems when importing the wasm package into other packages with other contexts. In these cases, there might be no webserver available that servers the wasm. Nevertheless, we, ideally, wanted to have 1 bundle that we can distribute everywhere.

[matthiasgeihs]

I've been able to achieve this by packaging the WASM as asset/inline (as described here), but my solution requires some custom extra code to load the WASM.

import * as wasmLib from "./pkg";
import wasmDataURL from "./pkg/example.wasm";

const base64Data = (wasmDataURL as any).split("base64,")[1]; // Extract base64 string from DataURL.
const wasmBuffer = Uint8Array.from(atob(base64Data), (c) => c.charCodeAt(0)); // Convert base64 to Uint8Array.

wasmLib.initSync(wasmBuffer); // Init WASM library.

It would be cool if this glue code wasn't needed.

[alexander-akait]

It is very specific, I don't think we really need an extra module type for this, it is just a couple line of code, also you can write a simple custom pitch loader for this