c-wasm-loader

Webpack loader that allows you to import C/C++ files as WebAssembly. This project is in very early development stage, and you're very welcome to contribute or file tickets, as well as it's not released yet, so api changes every day, publish process is not consistent, so some npm versions are broken.

Install with npm:

npm install --save-dev c-wasm-loader

Install with yarn:

yarn add c-wasm-loader --dev

This package automatically installs portable emsdk, so you should have cmake only available.

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |name|{String\|Function}|[hash].[ext]|Configure a custom filename template for your file| |regExp|{RegExp}|'undefined'|Let you extract some parts of the file path to reuse them in the name property| |outputPath|{String\|Function}|'undefined'|Configure a custom output path for your file| |useRelativePath|{Boolean}|false|Should be true if you wish to generate a context relative URL for each file| |limit|{Number\|String}|undefined|Byte limit to inline compiled files as Data URL| |std|{String}|undefined|Choose one of ISO C++ standards (C++98 / C++03, C++11, and C++14)| |includePaths|{Array}|undefined|| |bind|{Boolean}|false|| |optimizationLevel|{Number}|undefined|Optimization level for emscripten compiler| |debugLevel|{Number}|undefined|Debug level for emscripten compiler|

name

You can configure a custom filename template for your file using the query parameter name.

limit

If the file is greater than the limit (in bytes) the file-loader is used by default and all query parameters are passed to it.

The limit can be specified via loader options and defaults to no limit.

optimizationLevel

Code is optimized by specifying optimization flags when running emcc. The levels include: 0 (no optimization), 1, 2, s, z, 3.

Emcc strips out most of the debug information from optimized builds by default. Optimisation levels 0 and above remove LLVM debug information, and also disable runtime ASSERTIONS checks. From optimization level -02 the code is minified by the Closure Compiler and becomes virtually unreadable.

debugLevel

Can be used to preserve debug information in the compiled output. By default, this option preserves white-space, function names and variable names.

The flag can also be specified with one of five levels: 0, 1, 2, 3, 4. Each level builds on the last to provide progressively more debug information in the compiled output.

If set to 4 provides the most debug information — it generates source maps that allow you to view and debug the C/C++ source code in your browser’s debugger on Firefox, Chrome or Safari!

hello.c

#include <emscripten/emscripten.h>

extern "C" {
  int main(int argc, char ** argv) {
    printf("Hello\n");
  }

  int EMSCRIPTEN_KEEPALIVE world() {
    printf("World\n");
  }
}

hello.js

import hello from './hello.c';

hello().then((module) => {
  module._world();
});

webpack.config.js

module.exports = {
  externals: {
    fs: true
  },
  module: {
    rules: [
      {
        test: /\.(c|cpp)$/,
        use: {
          loader: 'c-wasm-loader',
          options: {
            outputPath: 'wasm',
            name: '[name]-[hash].[ext]'
          }
        }
      }
    ]
  }
}