eyecatchup · May 21, 2018 12:23 · May 20, 2018 · May 20, 2018 · May 20, 2018 · May 20, 2018
diff --git a/webpack.config.js b/webpack.config.js
@@ -22,16 +22,14 @@ module.exports = {
     path: path.resolve(__dirname, "dist"),
     filename: "bundle.js"
   },
+  // This is necessary due to the fact that emscripten puts both Node and web
+  // code into one file. The node part uses Node’s `fs` module to load the wasm
+  // file.
+  // Issue: https://github.com/kripken/emscripten/issues/6542.
+  browser: {
+    "fs": false
+  },
   module: {
-    // There seems to be a default rule for wasm that is run in _addition_ 
-    // to what I provide below, creating a  conflict. This basically 
-    // disables that rule.
-    defaultRules: [
-      {
-        type: "javascript/auto",
-        resolve: {}
-      }
-    ],
     rules: [
       // Emscripten JS files define a global. With `exports-loader` we can 
       // load these files correctly (provided the global’s name is the same
@@ -44,16 +42,12 @@ module.exports = {
       // to have their public URL.
       {
         test: /fibonacci\.wasm$/,
+        type: "javascript/auto",
         loader: "file-loader",
         options: {
           publicPath: "dist/"
         }
       }
     ]
   },
-  // This is necessary due to the fact that emscripten puts both Node and 
-  // web code into one file. The node part uses Node’s `fs` module to load 
-  // the wasm file. We can safely ignore that.
-  // Issue: https://github.com/kripken/emscripten/issues/6542.
-  plugins: [new webpack.IgnorePlugin(/(fs)/)]
 };
diff --git a/index.js b/index.js
@@ -14,6 +14,10 @@
 import fibonacci from './fibonacci.js';
 import fibonacciModule from './fibonacci.wasm';
 
+// Since webpack will change the name and potentially the path of the 
+// `.wasm` file, we have to provide a `locateFile()` hook to redirect
+// to the appropriate URL.
+// More details: https://kripken.github.io/emscripten-site/docs/api_reference/module.html
 const module = fibonacci({
   locateFile(path) {
     if(path.endsWith('.wasm')) {

diff --git a/webpack.config.js b/webpack.config.js
@@ -23,17 +23,25 @@ module.exports = {
     filename: "bundle.js"
   },
   module: {
+    // There seems to be a default rule for wasm that is run in _addition_ 
+    // to what I provide below, creating a  conflict. This basically 
+    // disables that rule.
     defaultRules: [
       {
         type: "javascript/auto",
         resolve: {}
       }
     ],
     rules: [
+      // Emscripten JS files define a global. With `exports-loader` we can 
+      // load these files correctly (provided the global’s name is the same
+      // as the file name).
       {
         test: /fibonacci\.js$/,
         loader: "exports-loader"
       },
+      // wasm files should not be processed but just be emitted and we want
+      // to have their public URL.
       {
         test: /fibonacci\.wasm$/,
         loader: "file-loader",
@@ -43,7 +51,9 @@ module.exports = {
       }
     ]
   },
-  // This is necessary due to the fact that emscripten puts both Node and web code into one file. The node part uses Node’s `fs` module to load the wasm file.
+  // This is necessary due to the fact that emscripten puts both Node and 
+  // web code into one file. The node part uses Node’s `fs` module to load 
+  // the wasm file. We can safely ignore that.
   // Issue: https://github.com/kripken/emscripten/issues/6542.
   plugins: [new webpack.IgnorePlugin(/(fs)/)]
 };
diff --git a/README.md b/README.md
@@ -2,6 +2,7 @@ Minimal example making webpack and wasm/Emscripten work together.
 
 Build instructions:
 
+- Clone this gist
 - `npm install`
 - `npm start` 
 - Open `http://localhost:8080`

diff --git a/README.md b/README.md
@@ -0,0 +1,18 @@
+Minimal example making webpack and wasm/Emscripten work together.
+
+Build instructions:
+
+- `npm install`
+- `npm start` 
+- Open `http://localhost:8080`
+- Look at console
+
+Note: Docker is required to build this project. 
+
+I filed [a bug with webpack](https://github.com/webpack/webpack/issues/7352) to make this integration easier.
+
+More questions? Hit me up on [Twitter](https://twitter.com/dassurma).
+
+License Apache-2.0
+
+<3 Surma
diff --git a/fibonacci.c b/fibonacci.c
@@ -1,3 +1,16 @@
+/**
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 #include <emscripten.h>
 
 EMSCRIPTEN_KEEPALIVE

diff --git a/index.js b/index.js
@@ -1,3 +1,16 @@
+/**
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import fibonacci from './fibonacci.js';
 import fibonacciModule from './fibonacci.wasm';
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,3 +1,16 @@
+/**
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 const webpack = require("webpack");
 const path = require("path");
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,20 +1,20 @@
-const webpack = require('webpack');
-const path = require('path');
+const webpack = require("webpack");
+const path = require("path");
 
 module.exports = {
   mode: "development",
-  context: path.resolve(__dirname, '.'),
+  context: path.resolve(__dirname, "."),
   entry: "./index.js",
   output: {
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(__dirname, "dist"),
     filename: "bundle.js"
   },
   module: {
     defaultRules: [
       {
         type: "javascript/auto",
         resolve: {}
-      },
+      }
     ],
     rules: [
       {
@@ -28,12 +28,9 @@ module.exports = {
           publicPath: "dist/"
         }
       }
-
     ]
   },
   // This is necessary due to the fact that emscripten puts both Node and web code into one file. The node part uses Node’s `fs` module to load the wasm file.
   // Issue: https://github.com/kripken/emscripten/issues/6542.
-  plugins: [
-    new webpack.IgnorePlugin(/(fs)/),
-  ]
+  plugins: [new webpack.IgnorePlugin(/(fs)/)]
 };
diff --git a/fibonacci.c b/fibonacci.c
@@ -0,0 +1,12 @@
+#include <emscripten.h>
+
+EMSCRIPTEN_KEEPALIVE
+int fib(int n) {
+  int i, t, a = 0, b = 1;
+  for (i = 0; i < n; i++) {
+    t = a + b;
+    a = b;
+    b = t;
+  }
+  return b;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<script src="./dist/bundle.js"></script>
diff --git a/index.js b/index.js
@@ -0,0 +1,16 @@
+import fibonacci from './fibonacci.js';
+import fibonacciModule from './fibonacci.wasm';
+
+const module = fibonacci({
+  locateFile(path) {
+    if(path.endsWith('.wasm')) {
+      return fibonacciModule;
+    }
+    return path;
+  }
+});
+
+
+module.onRuntimeInitialized = () => {
+  console.log(module._fib(12));
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "lol",
+  "scripts": {
+    "build:codec": "docker run --rm -v $(pwd):/src trzeci/emscripten emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME=\"fibonacci\"' -o ./fibonacci.js fibonacci.c",
+    "build:bundle": "webpack",
+    "build": "npm run build:codec && npm run build:bundle",
+    "serve": "http-server",
+    "start": "npm run build && npm run serve"
+  },
+  "devDependencies": {
+    "exports-loader": "^0.7.0",
+    "file-loader": "^1.1.11",
+    "http-server": "^0.11.1",
+    "webpack": "^4.8.3",
+    "webpack-cli": "^2.1.3"
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,39 @@
+const webpack = require('webpack');
+const path = require('path');
+
+module.exports = {
+  mode: "development",
+  context: path.resolve(__dirname, '.'),
+  entry: "./index.js",
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: "bundle.js"
+  },
+  module: {
+    defaultRules: [
+      {
+        type: "javascript/auto",
+        resolve: {}
+      },
+    ],
+    rules: [
+      {
+        test: /fibonacci\.js$/,
+        loader: "exports-loader"
+      },
+      {
+        test: /fibonacci\.wasm$/,
+        loader: "file-loader",
+        options: {
+          publicPath: "dist/"
+        }
+      }
+
+    ]
+  },
+  // This is necessary due to the fact that emscripten puts both Node and web code into one file. The node part uses Node’s `fs` module to load the wasm file.
+  // Issue: https://github.com/kripken/emscripten/issues/6542.
+  plugins: [
+    new webpack.IgnorePlugin(/(fs)/),
+  ]
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<!doctype html>
		<script src="./dist/bundle.js"></script>