使用 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')
    }
};

我们在这方面缺少什么吗？或者我可以用来完成这个的另一个包？任何帮助都会很棒。

谢谢！

Answer 1

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

嵌入文档

Emcc 文档搜索绑定