Why is defer connected instead of a simple script?

Question

JavaScript

Source

function component() {
    const element = document.createElement('div');

    element.innerHTML = 'Hello Webpack';

    return element;
}

document.body.appendChild(component());

at the output I get

package.json

"name": "GS_1C",
"version": "1.0.0",
"description": "project who must help to calculate subscription fee",
"main": "index.js",
"scripts": {
"build": "webpack"
},

"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^5.1.0",
"webpack": "^5.22.0",
"webpack-cli": "^4.5.0"
}
}

webpack.config.js

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
title: "GS_1C",
template: "./index.html"
})
]
};

Why is it that when I run the 'npm run build' command in my created index.html file, the script is connected as a defer

instead of a simple <script src="src/main.d0d2aba287fedfa53b27.js">