Error using ${lastTo}?

Question

webpack

Good afternoon! When using this line: $('ul').json2html(result ,{'<>':'li','html':'${lastTo} ${last}'});
I am getting an error:

ERROR in Template execution failed: ReferenceError: lastTo is not defined
ERROR in ReferenceError: lastTo is not defined
- lodash.templateSources[2]:9 eval
lodash.templateSources[2]:9:10
- index.html:105
C:/Users /Admin/Desktop/Webpack-Bootstrap22222/src/html/views/index.html:105:53
- index.html:108 module.exports
C:/Users/Admin/Desktop/Webpack-Bootstrap22222/src/html/views/ index.html:108:3
- index.js:284 Promise.resolve.then
[Webpack-Bootstrap22222]/[html-webpack-plugin]/index.js:284:18

There is a problem with the webpack config file, because without the webpack bundler, there is no error in the code.
My webpack.congig looks like this:

// const { createCanvas, loadImage } = require('canvas')
// const canvas = createCanvas(200, 200)
// const ctx = canvas.getContext('2d')

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const fs = require('fs')

function generateHtmlPlugins(templateDir) {
  const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir));
  return templateFiles.map(item => {
    const parts = item.split('.');
    const name = parts[0];
    const extension = parts[1];
    return new HtmlWebpackPlugin({
      filename: `${name}.html`,
      template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`),
      inject: false,
    })
  })
}

const htmlPlugins = generateHtmlPlugins('./src/html/views')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin({}),
      new UglifyJsPlugin({})
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 4200
  },
 
  
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',   
      template: './src/html/views/index.html',

    }),
    new HtmlWebpackPlugin({
      filename: 'header.html',
      template: './src/html/includes/header.html',
    }),
    
    new HtmlWebpackPlugin({
      filename: 'aside.html',
      template: './src/html/includes/aside.html',
    }),
  //   new HtmlWebpackPlugin({
  //     template: '!!html-loader!./src/html/views/index.html'
  // }),
    new MiniCssExtractPlugin({
      filename: 'css/style.css'
    })
  ].concat(htmlPlugins),
  resolve: {
    extensions: ['.js', '.ts']
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      //  {
      //   test: /\.scss$/,
      //   use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      // },
      {
        test: /\.html$/,
        include: path.resolve(__dirname, 'src/html/includes'),
        use: ['raw-loader']
      },
      //  {
      //       test: /\.html$/, // tells webpack to use this loader for all ".html" files
      //       loader: 'html-loader'
      //   },
   //   {
        
        //test: /\.(png|jpe?g|gif)$/i,
      //  use: [
        //  {
         // loader:'file-loader',
         // options:{
         //   name:'[name].[ext]',
         //   outputPath:'./',
          //  useRelativePath:true
         //   }
        //  }
       // ]
     // },
      
     
      { 
        test: /\.(js|ts)$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
      }
    ]
  }
}

Please help!!! I saw a solution somewhere:

new HtmlWebpackPlugin({
    template: '!!html-loader!index.html'
})

My path to the file that contains ${lastTo} is: './src/html/includes/reports.html'