HtmlWebpackPlugin无变量转换把手模板

我有一个车把模板文件，我正在用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,
  };
};

Handlebar模板使用生成的捆绑脚本进行转换，这些脚本被很好地注入，但没有任何我想要传递的自定义变量：

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

{{userName}

变成：

<p></p>

---

在internet或stackoverflow上找不到任何解决方案。任何帮助都将不胜感激。

这是否回答了您的问题？