使用webpack将Wasm和JS文件捆绑成一个文件束

Question

我目前正在使用Emscripten将我们的C++代码编译成Wasm。这样做可以输出两个文件*.js和*.wasm。随后，我使用我们的实现在其上编写更多的Javascript代码，从而得到3个文件：

 index.js
 wasmFile.js
 wasmFile.wasm

我正在尝试使用webpack创建一个单一的文件，在构建时打包所有内容，而不是在运行时使用以下代码：

function loadScript(url = "wasmFile.js") {
    var script = document.createElement( "script" );
    script.src = url;
    document.getElementsByTagName( "head" )[0].appendChild( script );
    await new Promise<void>((res) => {
        Module.onRuntimeInitialized = () => res();
    });
}

我已经研究了https://github.com/ballercat/wasm-loader，但是看起来我需要为所有函数创建一个WebAssembly.Instance - 而且Wasm文件有很多函数需要为每个函数创建一个实例。

这是我们目前的WebPack配置：

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.ts$/,
                enforce: 'pre',
                loader: 'tslint-loader',
                options: {
                    emitErrors: true
                }
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    }
};

这方面我们是否有什么遗漏？或者我可以使用其他软件包来完成这个任务吗？任何帮助都将不胜感激。

谢谢！

- civic.sir

---

一般来说，你不应该这样做。虽然有将Wasm嵌入JavaScript的方法，但你会失去WebAssembly的一些主要优势——精简大小、流式编译、代码缓存等等。你会少一个文件，但代价是更大和更慢的捆绑包，这并不值得做出这种权衡。 - RReverser

Answer 1

你可以使用-s SINGLE_FILE=1将应用程序构建为单个JS文件。 注意：这个答案可能不完全符合你的要求，但它解决了我类似的问题。

- Volodymyr Boich

Answer 2

尝试使用--bind选项。它将输出一个js和wasm文件，js文件加载wasm文件并导出可在js中使用的函数。

Embind文档

Emcc文档搜索绑定

- Prithvi Singh

---

这完全不是 --bind 的作用。Emscripten 输出 JS + Wasm，它们会相互加载。--bind 只启用了 Embind，允许用户在 JavaScript 和 C++ 之间转换某些值，但对于捆绑器并没有什么特殊作用。 - RReverser