使用 webpack 将 Wasm + JS 文件捆绑为一个答案

【问题标题】：Bundle Wasm + JS file into one using webpack使用 webpack 将 Wasm + JS 文件捆绑为一个
【发布时间】：2019-10-19 10:31:27
【问题描述】：

我目前正在使用 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')
    }
};

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

谢谢！

【问题讨论】：

一般来说，你不应该那样做。有多种方法可以将 Wasm 嵌入到 JavaScript 中，但是您正在失去 WebAssembly 的一些主要优势——精简大小、流式编译、代码缓存等等。您将以更大、更慢的捆绑包为代价获得更少的文件，这不值得进行权衡。

标签： javascript webpack emscripten webassembly

【解决方案1】：

您可以使用 -s SINGLE_FILE=1 将您的应用构建为单个 JS 文件

注意：这个答案可能不是你想要的，但它为我解决了类似的问题。

【讨论】：

【解决方案2】：

试试--bind 选项。会输出一个js和wasm文件，js文件加载wasm文件，导出js使用的函数。

Embind doc

Emcc doc search for bind

【讨论】：

这根本不是--bind 所做的。 Emscripten 输出相互加载的 JS + Wasm。 --bind 只启用了 Embind，它允许用户在 JavaScript 和 C++ 之间转换某些值，但它对打包程序没有任何特殊作用。