Example of registering custom handlebars helpers (+ handlebars-form-helpers) with webpack

handlebars.js

// Import Handlebars runtime lib
const Handlebars = require('handlebars/runtime');

const register = require('handlebars-form-helpers').register;
const { registerHandlebarHelpers } = require('../../some/other/place');

// Register extra helpers
register(Handlebars);
registerHandlebarHelpers(Handlebars);

/**
 * Handlebars runtime with custom helpers.
 * Used by handlebars-loader.
 */
module.exports = Handlebars;

webpack.config.js

// Don't forget to add the rest of the webpack configuration!
module.exports = {
  module: {
    rules: [
      {
        test: /\.hbs$/,
        use: [
          {
            loader: 'handlebars-loader',
            options: {
              // Path to your custom js file, which has Handlebars with custom helpers registered
              runtime: join(__dirname, 'app/src/handlebars')
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.hbs']
  }
};

Could you please elaborate on how to make this work?
I integrated these snippets into my webpack project and I can build my project successfully, as long as I don't use my helper.
When inserting {{{concat 'a' 'b'}}} into my index.hbs I get errors though.

This is my handlebars.js:

const Handlebars = require('handlebars/runtime');

Handlebars.registerHelper('concat', function() {
            var outStr = '';
            for(var arg in arguments){
                if(typeof arguments[arg]!='object'){
                    outStr += arguments[arg];
                }
            }
            return outStr;
        } );

module.exports = Handlebars;

yes a structure diagram would be great here!

I had to add options.precompileOptions.knownHelpersOnly = false to handlebars-loader on webpack config in order to compile successfully.