Ever wanted to include C/C++ files directly from Javascript? Well now you can.

This Webpack loader allows you to import C or C++ files, which are compiled to WASM using Emscripten.

The C/C++ files have to know about Emscripten, so you can export functions. For simple things it's enough to include emscripten and add EMSCRIPTEN_KEEPALIVE to your functions (+ extern "C" for C++).

You should be able to run simple C/C++ files in any modern browser that supports WASM (Chrome, Firefox etc.).

Webpack settings

module.exports = {
  module: {
    rules: [
      {
        test: /\.(c|cpp)$/,
        use: {
          loader: 'cpp-wasm-loader',
          options: {
            emccPath: 'path-to-emcc',
            emccFlags: ['-O3']
          }
        }
      }
    ]
  },
  externals: {
    'fs': true
  }
}

C/C++ file

#include <stdio.h>
#include <stdlib.h>
#include <time.h>
#include <emscripten/emscripten.h>

int main(int argc, char ** argv)
{
    printf("WASM loaded\n");
}

// Simple C function that returns a number between 1 and 6.
int EMSCRIPTEN_KEEPALIVE roll_dice() {
    srand ( time(NULL) );
    return rand() % 6 + 1;
}

Usage in Javascript

import wasm from './source.c';

wasm.initialize().then(module => {
  const result = module._roll_dice();
  console.log(result);
});

The following options can be added to the Webpack loader query:

Emscripten

MIT

• generate Typescript definitions (using Clang)
• automatically export functions (using Clang)

Inspired by rust-wasm-loader and this article. WASM alternative of cpp-loader.