javascript - 使用 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

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