Reactの環境構築でmodule not foundのエラーが出てしまいます

現在React環境構築の教科書というテキストを使い環境構築の学習をしているものですが以下の状態でnpx webpack-dev-serverでchromeに正方形の図形が表示されるとあるのですがERROR in ./src/index.tsx
Module not found: Error: Can't resolve './example.png' in 'practice/src'@ ./src/index.tsx 27:36-60
というエラーが出ます。テキストを見返しましたが同じようにできていると思います。こういったエラーを検索してみましたが解決策を見つけられませんでした。またこのテキストですがココナラで他のエラーについて詳しい方に聞いた際に誤植があるとの事で実際にその箇所を直すと上手くいきました。
もしかしたらまだそのような箇所があるのかもしれません。何かわかる方がいらっしゃればよろしくお願いします。
足りない情報などがあればご指摘ください

practice（プロジェクトのディレクトリ）
├── dist
│ └── index.html
│──── node_modules
│
└── src
│ ├── import-file.d.ts
│ └── index.html
│ └── index.js
│ └── index.tsx
│ └── reset.css
│────────package-lock.json
│────────package.json
│────────tsconfig.json
└────────webpack.config.js

dist/index.html（ファイル名）
<!Doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>js-build-book-support</title>
</head>
<body>
  <div id="root"></div>
  <script src="build.js"></script>
</body>
</html>

src/import-file.d.ts（ファイル名）
declare module "*.png";

src/index.html（ファイル名）
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js-build-book-support</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

src/index.tsx（ファイル名）
import * as React from "react";
import * as ReactDOM from "react-dom";
import Img from "./example.png";
import "./reset.css";

ReactDOM.render(
  <div>
    helloworld.<img src={Img}>
    </img>
  </div>,
  document.getElementById("root")
);

src/reset.css（ファイル名）
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  box-sizing: border-box;
}

package-json
{
  "name": "practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "css-loader": "^5.0.0",
    "file-loader": "^6.1.1",
    "html-webpack-plugin": "^4.5.0",
    "style-loader": "^2.0.0",
    "ts-loader": "^8.0.6",
    "typescript": "^4.0.3",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  }
}

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: process.env.NODE_ENV,
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "build.js",
  },
  module: {
    rules: [
      {
        test: /.(ts|tsx)$/,
        use: [
          {
            loader: "ts-loader",
          },
        ],
      },
      {
        test: /.(css)$/,
        use: ["style-loader", "css-loader"
        ],
      },
      {
        test: /.(png)$/,
        use: ["file-loader"],
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
};