HtmlWebpackPlugin трансформирующий шаблон рулей без переменных

У меня есть файл шаблона Handlebars, который я трансформирую с помощью webpack и HtmlWebpackPlugin:

new HtmlWebpackPlugin({
    title: 'Title',
    chunks: ['app'],
    meta: {
      author: 'Me',
      viewport: 'width=device-width, initial-scale=1',
    },
    publicPath: path.sep,
    template: path.resolve(__dirname, 'templates', 'app.hbs'),
    filename: 'app.hbs',
    favicon: path.resolve(__dirname, 'templates', 'favicon.png'),
  }),

module.exports = (env) => {
  const isProduction = process.env.MODE === 'production';

  return {
    mode: process.env.MODE,
    entry: {
      login: path.resolve(__dirname, 'src', 'login', 'login.tsx'),
      app: path.resolve(__dirname, 'src', 'app', 'app.tsx'),
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].[contenthash].js',
    },
    target: 'web',
    watch: !isProduction,
    devtool: isProduction ? false : 'inline-source-map',
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
    module: {
      rules: [
        {
          test: /\.ts(x?)$/,
          exclude: /node_modules/,
          use: 'ts-loader',
        },
        {
          test: /\.hbs$/,
          loader: 'handlebars-loader',
        },
        {
          test: /\.png$/,
          use: [{ loader: 'url-loader', options: { limit: 8192 } }],
        },
      ],
    },
    plugins,
  };
};

Шаблон Handlebars трансформируется с помощью сгенерированных связанных скриптов, которые хорошо вводятся, но без каких-либо пользовательских переменных, которые я хочу передать:

<p>{{userName}}</p>

Становится:

<p></p>

Не нашел решения в Интернете или здесь, в stackoverflow. Любая помощь будет оценена.