Why doesn't Webpack see the querySelector from the HandelBars template?

Question

JavaScript

Here is the HBS markup
{{#each names}}


{{#each this}}
class='more-card__img'
src="{{thumbnail}}"
alt="{{byline}}"
loading='lazy'
/>
{ {/each}}



{{#each this}}
{{headline}}
{{/each}}


{{#each this}}
{{bodyText}}
{{/each}}

{{timares}}
{{body} }

Read more



{{/each}}

Webpach.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const PORT = process.env.PORT
module.exports = {
entry: './src/js/index.js',
mode: 'development',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-timer-webpack. bundle.js',
},
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader',
options: {
// Disables attributes processing
sources: false,
},
},
{ test : /\.txt$/, use: 'raw-loader' },
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.hbs$/,
loader: 'handlebars-loader',
exclude: /(node_modules|bower_components) /,
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
},
plugins: [new HtmlWebpackPlugin({ template: './src/ index.html' })],
devServer: {
static: {
directory: path.join(__dirname, './'),
},
compress: true,
port: PORT,
},
}
js file
console.log(document.querySelector('.js-readmore'))

why is the console outputting null