From c2e2a1a0b65681f646b21b67efd270461f268417 Mon Sep 17 00:00:00 2001
From: Surma <surma@surma.link>
Date: Thu, 17 May 2018 16:04:56 +0100
Subject: [PATCH] Succesfully load wasm file via webpack

---
 codecs/mozjpeg_enc/mozjpeg_enc.d.ts   |  2 +-
 package-lock.json                     | 10 ++++++++++
 package.json                          |  1 +
 src/lib/codec-wrappers/mozjpeg-enc.ts | 22 ++++++++++++++++++----
 webpack.config.js                     | 18 +++++++++++++++++-
 5 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/codecs/mozjpeg_enc/mozjpeg_enc.d.ts b/codecs/mozjpeg_enc/mozjpeg_enc.d.ts
index 5e680ea9..c3a5a4bb 100644
--- a/codecs/mozjpeg_enc/mozjpeg_enc.d.ts
+++ b/codecs/mozjpeg_enc/mozjpeg_enc.d.ts
@@ -1 +1 @@
-export default function(): EmscriptenWasm.Module;
+export default function(opts: {}): EmscriptenWasm.Module;
diff --git a/package-lock.json b/package-lock.json
index 84533abe..673baa70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4736,6 +4736,16 @@
         "object-assign": "^4.0.1"
       }
     },
+    "file-loader": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz",
+      "integrity": "sha512-TGR4HU7HUsGg6GCOPJnFk06RhWgEWFLAGWiT6rcD+GRC2keU3s9RGJ+b3Z6/U73jwwNb2gKLJ7YCrp+jvU4ALg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.0.2",
+        "schema-utils": "^0.4.5"
+      }
+    },
     "filename-regex": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
diff --git a/package.json b/package.json
index 372a8749..472385fc 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "eslint-plugin-react": "^7.7.0",
     "eslint-plugin-standard": "^3.0.1",
     "exports-loader": "^0.7.0",
+    "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.0.6",
     "if-env": "^1.0.4",
     "loader-utils": "^1.1.0",
diff --git a/src/lib/codec-wrappers/mozjpeg-enc.ts b/src/lib/codec-wrappers/mozjpeg-enc.ts
index 47a3420d..732b4a47 100644
--- a/src/lib/codec-wrappers/mozjpeg-enc.ts
+++ b/src/lib/codec-wrappers/mozjpeg-enc.ts
@@ -1,19 +1,33 @@
 import {Encoder} from './codec';
 
 import mozjpeg_enc from '../../../codecs/mozjpeg_enc/mozjpeg_enc';
+// Using require() so TypeScript doesn’t complain about this not being a module.
+const wasmBinaryUrl = require('../../../codecs/mozjpeg_enc/mozjpeg_enc.wasm');
 
 export class MozJpegEncoder implements Encoder {
   private emscriptenModule: Promise<EmscriptenWasm.Module>;
   constructor() {
     this.emscriptenModule = new Promise(resolve => {
-      console.log(mozjpeg_enc);
-      const m = mozjpeg_enc();
-      m.onRuntimeInitialized = () => resolve(m);
+      const m = mozjpeg_enc({
+        // Just to be safe, don’t automatically invoke any wasm functions
+        // noInitialRun: false,
+        locateFile(url: string): string {
+          // Redirect the request for the wasm binary to whatever webpack gave us.
+          if(url.endsWith('.wasm')) {
+            return wasmBinaryUrl;
+          }
+          return url;
+        },
+        onRuntimeInitialized() {
+          resolve(m);
+        }
+      });
     });
   }
 
   async encode(bitmap: ImageBitmap): Promise<ArrayBuffer> {
-    console.log('encoding!');
+    console.log('awaiting module');
+    debugger;
     const m = await this.emscriptenModule;
     console.log(m);
     return Promise.resolve(<ArrayBuffer>new Uint8Array([1,2,3]).buffer);
diff --git a/webpack.config.js b/webpack.config.js
index 312166cf..5b4e43a3 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -48,6 +48,18 @@ module.exports = function (_, env) {
       }
     },
     module: {
+      // This is needed to make webpack NOT process wasm files.
+      // See https://github.com/webpack/webpack/issues/6725
+      defaultRules: [
+        {
+          type: "javascript/auto",
+          resolve: {}
+        },
+        {
+          test: /\.json$/i,
+          type: "json"
+        },
+      ],
       rules: [
         {
           test: /\.(scss|sass)$/,
@@ -110,8 +122,12 @@ module.exports = function (_, env) {
         },
         {
           // All the codec files define a global with the same name as their file name. `exports-loader` attaches those to `module.exports`.
-          test: /\/codec\/.*\.js$/,
+          test: /\/codecs\/.*\.js$/,
           loader: 'exports-loader',
+        },
+        {
+          test: /\/codecs\/.*\.wasm$/,
+          loader: 'file-loader',
         }
       ]
     },