To round out our example, we need to add a few more files.

First we need setup a js file to call the functions defined in our wasm-bindgen js file. The first line here is going to use a special function for webpack that will import the module called import which returns a promise. The promise will resolve when our module is done loading, at that point we are going to assign the result to our global variable hw. Now that we know hw is available to use, we want to register an event listener on our button that will call sayHello. This function gets a value from the input and if it is empty calls the "Hello, world!" version and if not will pass the value to the custom version, this is where we are going to be using the actual Web Assembly module we created. It then passes the result to updateMessage, this function simply finds the container we made, empties it of all content and then inserts our text wrapped in an <h1>.

index.js

const mod = import('./hello_world');
let hw;
mod.then(wasm => {
    hw = wasm;
    let btn = document.getElementById('say-hello');
    if (!btn) return console.error('No button found');
    btn.addEventListener('click', sayHello);
});

function sayHello() {
    let input = document.getElementById('your-name');
    if (!input || input.value == '') {
        updateMessage(hw.generate_greeting());
    } else {
        updateMessage(hw.generate_custom_greeting(input.value));
    }
}

function updateMessage(msg) {
    let div = document.getElementById('message-container');
    if (!div) return console.error('No message-container div found');
    while (div.hasChildNodes()) {
        div.removeChild(div.lastChild);
    }
    let h1 = document.createElement('h1');
    h1.appendChild(document.createTextNode(msg))
    div.appendChild(h1);
}
Now we will need to create our package.json file and add the required webpack dev-dependencies. I chose to use yarn but you could use npm just the same.

add webpack

$ yarn init
...
$ yarn add -D webpack webpack-cli webpack-dev-server
...
We also need to setup a webpack config file. This is about as simple as it can be made.

webpack.config.js

const path = require('path');

module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
  },
  mode: "development"
};
Lastly here is the here is the html page. This will just be an input, a button and a container for displaying the text.

index.html

<html>
    <head></head>
    <body>
        <div>
            <label for="your-name">Your Name</label>
            <input type="text" id="your-name" />
            <button id="say-hello" type="button">Say Hello</button>
        </div>
        <div id="message-container"></div>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Now we can use the webpack development server to view our work. In this state, the application will only work in firefox, if you want it to work in chrome you would need to make a few modifications.

I go over these modifications here though that is for our next example, so it will not map directly to what we have here. You also may want to look at the wasm2es6js tool that comes with wasm-bindgen-cli, you can learn more about how/why here.

You can run it locally with the following command. I have included a live demo link below if you just want to see it now.

run the server

$ webpack-dev-server

For the impatient, here it is working from github pages:

live demo