I am currently using Emscripten to pile our C++ Code into Wasm. By doing so I output two files *.js and *.wasm. Later I use our implementation to write more Javascript code on top of that which leads us to 3 files:

 index.js
 wasmFile.js
 wasmFile.wasm

I am trying to use webpack to create a single file that will package everything at build time rather than runtime with this piece of code:

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();
    });
}

I have looked into However, it looks like i would need to create a WebAssembly.Instance for all my function - and the Wasm file has a lot of functions to create an instance for each.

This is how our WebPack config looks like at the moment:

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

Is there something we are missing on this? Or another package i could use to acplish this? Any help would be wonderful.

Thanks!

I am currently using Emscripten to pile our C++ Code into Wasm. By doing so I output two files *.js and *.wasm. Later I use our implementation to write more Javascript code on top of that which leads us to 3 files:

 index.js
 wasmFile.js
 wasmFile.wasm

I am trying to use webpack to create a single file that will package everything at build time rather than runtime with this piece of code:

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();
    });
}

I have looked into https://github./ballercat/wasm-loader However, it looks like i would need to create a WebAssembly.Instance for all my function - and the Wasm file has a lot of functions to create an instance for each.

This is how our WebPack config looks like at the moment:

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

Is there something we are missing on this? Or another package i could use to acplish this? Any help would be wonderful.

Thanks!

• javascript
• webpack
• emscripten
• webassembly

Share Improve this question Follow edited Jul 15, 2019 at 14:31 Josh Lee 178k3939 gold badges277277 silver badges281281 bronze badges asked Jun 3, 2019 at 21:16 civic.sircivic.sir 41022 gold badges1111 silver badges2828 bronze badges 1

• Generally speaking, you shouldn't do that. There are ways to embed Wasm into JavaScript, but you're losing some of the main advantages of WebAssembly - lean size, streaming pilation, code caching and more. You'll have one less file at the cost of a much larger and slower bundle and it's not a tradeoff worth doing. – RReverser Commented Sep 14, 2021 at 17:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can build your app as a single JS file using -s SINGLE_FILE=1

Note: This answer is probably not exactly what you want but it solved similar problem for me.

Try out the --bind option. It will output a js and wasm file, the js file loads wasm files and exports the functions to be used in js.

Embind doc

Emcc doc search for bind