Webpack 5 Support for Accessing Rust WebAssembly Linear Memory

aforesaidTroubleshooting Rust WebAssembly Errors When Launching Web Programs. The article talks about puttingWebpack upgrade to5.54.0+The problem has not been completely solved. In fact, the problem is not completely solved, and there is another problem lurking. When we export thememory accessWebAssembly Linear memory:

import { memory } from "wasm-game-of-life/wasm_game_of_life_bg";

existnpm run start When it does, an alarm is raised, and as a result, the program does not run properly:

export 'memory' (imported as 'memory') was not found in 'wasm-game-of-life/wasm_game_of_life_bg'
 (possible exports: Universe, __wbg_error_f851667af71bcfc6, 
__wbg_new_abda76e883ba8a5f, __wbg_set_wasm, __wbg_stack_658279fe44541cf6, 
__wbindgen_object_drop_ref, __wbindgen_throw)

On githubwasm-bindgen、wasm-pack cap (a poem)webpack I searched through the Issues of the I found that similar problems have been reported, and for some reason they are still Open after 2-3 years. However, there are solutions in the comments that can be suggested.

Summarizing the approach in the comments, I made this modification myself:

First, in thewww Create a source file in the directoryThe purpose of the program is to provide a means of obtaining information from thewasm Exporting from a filememoryThe content is as follows:

// through (a gap) `wasm` Exporting from a file `memory`
export { memory } from "wasm-game-of-life/wasm_game_of_life_bg.wasm";

Then, before we need to access thememory is imported from the source file of the

// import (data) `memory`
import { memory } from './memory';

...

// Accessing Cosmic Cell Data in Linear Memory
const cellsPtr = ();
const size = ((width * height) / 8);
const cells = new Uint8Array(, cellsPtr, size);

one more timenpm run start, normal operation!

By the way, don't forget our previous upgradeWebpack 5 When modifying the：

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require('path');

 = {
  entry: "./",
  output: {
    path: (__dirname, "dist"),
    filename: "",
  },
  mode: "development",
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: "" },
      ]
    })
  ],
  // be in favor of WebAssembly ask for a doggy bag (at a restaurant)
  experiments: {
    asyncWebAssembly: true,
    syncWebAssembly: true
  },
};