Created two Files in webpack build!!! How to disable it - html

Question

I have been trying to use Webpack for several days.
And I encountered a problem in configuring.
This is my configuration now!(webpack config)
// Look for .html files
let htmlFiles = [];
let directories = ["src"];
while (directories.length > 0) {
let directory = directories.pop();
let dirContents = fs
.readdirSync(directory)
.map((file) => path.join(directory, file));
htmlFiles.push(...dirContents.filter((file) => file.endsWith(".html")));
directories.push(
...dirContents.filter((file) => fs.statSync(file).isDirectory())
);
}
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name].[contenthash].js",
},
plugins: [
new CleanWebpackPlugin(),
new WebpackBar(),
new HtmlWebpackPlugin({
template: "./src/index.html",
hash: true,
filename: "index.html",
inject: "head",
scriptLoading: "defer",
xhtml: true,
}),
],
module: {
rules: [
//-------> CSS <-------//
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
generator: {
filename: "assets/styles/[name].[contenthash] [ext]",
},
},
//-------> HTML <-------//
{
test: /\.html$/i,
loader: "html-loader",
},
//-------> Images <-------//
{
test: /\.(png|jpe?g|gif)$/i,
type: "asset/resource",
generator: {
filename: "assets/images/[name].[hash][ext]",
},
},
//-------> Fonts <-------//
{
test: /\.(woff(2)?|ttf|eot)$/,
type: "asset/resource",
generator: {
filename: "./assets/fonts/[name].[contenthash][ext]",
But during construction, I see that two files are created from index.js...why??...how to disable it??
How fix it?
Thanks
Two created .js