We're using several different file types in addition to JavaScript for the application: CSS, SVG, HTML, and so on. Installing the -loader dependencies is only part of the equation—you also need to tell Webpack how to load them. You also need to specify configuration details for any plugins you have installed. You can specify the loading and configuration details in a webpack.config.js file in the root folder of your project. The following snippet contains the contents of /webpack-example/webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            // We need this to use async/await:
            presets: [
              [
                '@babel/preset-env', {
                  targets: { node: '10' }
                }
              ]
            ]
          }
        }
      },
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader',
          options: { minimize: true }
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.(c|cpp)$/,
        use: {
          loader: 'cpp-wasm-loader',
          options: {
            emitWasm: true
          }
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'assets/[name].[ext]'
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: './index.html'
    }),
    // This is used for bundling (building for production):
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
};

The rules section tells Webpack which loader to use for a file extension. The fourth item in the array handles C/C++ files (note the test field value containing c|cpp). The HtmlWebpackPlugin takes the contents of /src/index.html, adds any required <script> tags, minifies it, and creates an index.html in the build folder, which defaults to /dist. The MiniCssExtractPlugin copies any imported CSS into a single CSS file in the /dist folder. We'll review how to build the project in a later section, so let's move on to the application code, starting with the C file.