example integration with webpack

[v3nt]

there is a lot of docs about helpers but I can't find a simple example that shows me how to install and use these in webpack and then .hbs files.

I have got my own custom helpers helperDirs: path.resolve("./src", "./helpers") working but just can't seem to wire up helpers from webpack config and use them.

const HtmlWebpackPlugin = require("html-webpack-plugin");
const globals = require("./globals.json");
const path = require("path");
const nodeExternals = require("webpack-node-externals");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const csvFilePath = "./src/data/locations-latlng-mock-data.csv";
let csvToJson = require("convert-csv-to-json");
let fileInputName = csvFilePath;
var articlesJson = [];
let json = csvToJson.fieldDelimiter(",").getJsonFromCsv(fileInputName);
for (let i = 0; i < json.length; i++) {
  articlesJson.push(json[i]);
}

// hbs - how to use these? 
var helpers = require("handlebars-helpers")(["math", "string"]);

// console.log(helpers);

module.exports = {
  mode: "development",
  entry: {
    main: ["./src/app.js"],
  },
  watch: true,
  devtool: "inline-source-map",
  plugins: [
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: ["dist"],
      cleanStaleWebpackAssets: false,
    }),
    new MiniCssExtractPlugin({
      filename: "[name].[hash].css",
      chunkFilename: "[id].[hash].css",
    }),

    new HtmlWebpackPlugin({
      title: "Custom template using Handlebars",
      activities: articlesJson,
      activities_two: articlesJson,
      template: "./src/index.hbs",
    }),
  ],
  devServer: {
    liveReload: true,
    contentBase: "./src",
    compress: true,
    publicPath: "/",
    watchContentBase: true,
    progress: true,
    port: 8080,
    inline: true,
    hot: true,
    watchOptions: {
      poll: 1000,
      ignored: ["node_modules"],
    },
  },
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.tsv$/,
        loader: "csv-loader",
        options: {
          dynamicTyping: true,
          header: true,
          skipEmptyLines: true,
        },
      },
      {
        test: /\.(csv|tsv)$/,
        use: ["csv-loader"],
      },
      {
        test: /\.hbs$/,
        loader: "handlebars-loader",
        options: {
          precompileOptions: {
            knownHelpersOnly: false,
          },
          helperDirs: path.resolve("./src", "./helpers"),
        },
      },
    ],
  },

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[hash].js",
    publicPath: "/",
  },
};

Any pointers welcome!