Cache-bust olm.wasm

In the same way as we now do images/fonts

scripts/copy-res.js

@@ -58,10 +58,6 @@ const COPY_LIST = [
     ["node_modules/matrix-react-sdk/res/media/**", "webapp/media"],
     ["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"],
     ["node_modules/emojione/assets/png/*", "webapp/emojione/png/"],
-    // XXX: This is tied quite heavily to the matching olm.js so it really should be
-    // in the bundle dir with the js to avoid caching issues giving us wasm that
-    // doesn't match our js, but I cannot find any way to get webpack to do this.
-    ["node_modules/olm/olm.wasm", "webapp", { directwatch: 1 }],
     ["node_modules/olm/olm_legacy.js", "webapp", { directwatch: 1 }],
     ["./config.json", "webapp", { directwatch: 1 }],
 ];

src/vector/index.js

@@ -24,6 +24,8 @@ require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');
 require('draft-js/dist/Draft.css');
 
+import olmWasmPath from 'olm/olm.wasm';
+
 import './rageshakesetup';
 
 import React from 'react';
@@ -379,18 +381,19 @@ function loadOlm() {
      *
      * We also need to tell the Olm js to look for its wasm file at the same
      * level as index.html. It really should be in the same place as the js,
-     * ie. in the bundle directory, to avoid caching issues, but as far as I
+     * ie. in the bundle directory, but as far as I can tell this is
-     * can tell this is completely impossible with webpack.
+     * completely impossible with webpack. We do, however, use a hashed
+     * filename to avoid caching issues.
      */
     return Olm.init({
-        locateFile: () => 'olm.wasm',
+        locateFile: () => olmWasmPath,
     }).then(() => {
         console.log("Using WebAssembly Olm");
     }).catch((e) => {
         console.log("Failed to load Olm: trying legacy version");
         return new Promise((resolve, reject) => {
             const s = document.createElement('script');
-            s.src = 'olm_legacy.js';
+            s.src = 'olm_legacy.js'; // XXX: This should be cache-busted too
             s.onload = resolve;
             s.onerror = reject;
             document.body.appendChild(s);

webpack.config.js

@@ -25,6 +25,15 @@ module.exports = {
         rules: [
             { enforce: 'pre', test: /\.js$/, use: "source-map-loader", exclude: /node_modules/, },
             { test: /\.js$/, use: "babel-loader", include: path.resolve(__dirname, 'src') },
+            {
+                test: /\.wasm$/,
+                loader: "file-loader",
+                type: "javascript/auto", // https://github.com/webpack/webpack/issues/6725
+                options: {
+                    name: '[name].[hash:7].[ext]',
+                    outputPath: '.',
+                },
+            },
             {
                 test: /\.scss$/,
                 // 1. postcss-loader turns the SCSS into normal CSS.