firebase error html file, can’t read the file in html and won’t add just got an error

I’m trying to run firebase using html file, it is necessary to use install http server cause that is the only thing i did not have in the video, and also i did not have the 3 array in the console that show in the video when i run live service in browser, that show that vscode did not read the file from firebase, i run the html live server from safari mac

error at 5:58 / 9:20min

Getting Started with Firebase 9 #5 – Adding & Deleting Documents

https://www.youtube.com/watch?v=s1frrNxq4js&list=PL4cUxeGkcC9jERUGvbudErNCeSZHWUVlb&index=5

Failed to load resource: the server responded with a status of 404 (Not Found)
http://192.168.1.7:5500/favicon.ico

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (favicon.ico, line 0)

Folder-dist

File-bundle.js

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/    var __webpack_modules__ = ({

/***/ "./scr/index.js":
/*!**********************!*
  !*** ./scr/index.js ***!
  **********************/
/***/ (() => {

eval("console.log('hello from index.js')nn//# sourceURL=webpack://firebase9dojo/./scr/index.js?");

/***/ })

/******/    });
/************************************************************************/
/******/    
/******/    // startup
/******/    // Load entry module and return exports
/******/    // This entry module can't be inlined because the eval devtool is used.
/******/    var __webpack_exports__ = {};
/******/    __webpack_modules__["./scr/index.js"]();
/******/    
/******/ })()
;

File-index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firebase 9</title>
</head>
<body>
    <h1>Getting started with Firebase 9</h1>




    <h2>Firebase Firestore</h2>
    <form class="add">
        <label for="title">Tittle:</label>
        <input type="text" name="title" required>
        <label for="author">Author:</label>
        <input type="text" name="author" required>

        <button>add a new book</button>
    </form>

    <form class="delete">
        <label for="id">Document id:</label>
        <input type="text" name="id" required>

        <button>delete a book</button>
    </form>





    <script src="bundle.js"></script>
</body>
</html>

Folder-node_modules

Folder-scr

File-index.js

import { initializeApp } from 'firebase/app'
import {
  getFirestore, collection, getDocs,
  addDoc
} from 'firebase/firestore'//using "Firestore Database" from firebase -2

const firebaseConfig = {
    apiKey: "12345",//use your own firebase for this
    authDomain: "12345.firebaseapp.com",//use your own firebase for this
    projectId: "12345",//use your own firebase for this
    storageBucket: "12345ea.appspot.com",//use your own firebase for this
    messagingSenderId: "12345",//use your own firebase for this
    appId: "12345"//use your own firebase for this
  };

//init firebase app
  //method.firebase object
initializeApp(firebaseConfig)

//init services-2
const db = getFirestore()

//collection ref-2
const colRef = collection(db, 'books')

//get collection data-2
getDocs(colRef)
  .then((snapshot) => {
    //console.log(snapshot.docs)
    let books = snapshot.docs.forEach((doc) => {
        books.push({ ...doc.data(), id: doc.id })
    })
    console.log(books)
  })
  .catch(err => {
      console.log(err.message)
  })





  //adding documuments
  const addBookForm = document.querySelector('.add')
  addBookForm.addEventListener('submit', (e) => {
      e.preventDefault()
    addDoc(colRef, {
        title: addBookForm.title.value,
        author: addBookForm.author.value,
    })
    .then(() => {
        addBookForm.reset()
    })
  })

//deleting documents
const deleteBookForm = document.querySelector('.delete')
deleteBookForm.addEventListener('submit', (e) => {
    e.preventDefault()
})

File-package-lock.json

File-package.json

{
  "name": "firebase9dojo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "firebase": "^9.6.8"
  }
}

File-webpack.config.js

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './scr/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  watch: true
}