Succesfully load wasm file via webpack

codecs/mozjpeg_enc/mozjpeg_enc.d.ts

@@ -1 +1 @@
-export default function(): EmscriptenWasm.Module;
+export default function(opts: {}): EmscriptenWasm.Module;

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",

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",

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

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',
         }
       ]
     },