MERN - ошибка: дочерняя компиляция не выполнена: модуль ввода не найден: ошибка: не удается разрешить «html-загрузчик»

Question

Я застрял в этой проблеме надолго и не знаю, как ее решить.Я просто хочу решить эту проблему и развернуть ее.

MERN - Ошибка: Дочерняя компиляция не выполнена: Модуль ввода не найден: Ошибка: Не удается разрешить 'html-loader'

Плагин Html Webpack: Ошибка: Дочерняя компиляцияСбой: Модуль входа не найден: Ошибка: Не удается разрешить «загрузчик html» в «C: \ Users \ Wachir awit \ Desktop \ KaewlomsupAnimalsCare»: Ошибка: Не удается разрешить «загрузчик html» в «C: \ Users»\ Wachirawit \ Desktop \ KaewlomsupA nimalsCare '

• compiler.js: 79 childCompiler.runAsChild [KaewlomsupAnimalsCare] / [html-webpack-plugin] /lib/compiler.js:79:16

• Compiler.js: 296 compile [KaewlomsupAnimalsCare] / [webpack] /lib/Compiler.js:296:11

• Compiler.js:552 крючка.доступный для записи] /lib/Hook.js:154:20

• Compiler.js: 549 compilation.seal.err [KaewlomsupAnimalsCare] / [веб-пакет] /lib/Compiler.js:549: 30

• Hook.js: 154 AsyncSeriesHook.lazyCompileHook [KaewlomsupAnimalsCare] / [tapable] /lib/Hook.js:154:20

• Compilation.js: 1323 hooks.optimizeAssets.callAsync.err [KaewlomsupAnimalsCare] / [webpack] /lib/Compilation.js:1323:35

webpack.config.js

    const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const CleanWebpackPlugin = require("clean-webpack-plugin");

    const outputDirectory = "dist";

    module.exports = {
      entry: ["babel-polyfill", "./src/client/index.js"],
      output: {
        path: path.resolve(__dirname, outputDirectory),
        filename: "bundle.js"
      },
      module: {
        rules: [
          {
            test: /\.(js)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
          }
          },
          {
            test: /\.(css)$/,
            use: ["style-loader", "css-loader"]
          },
          {
            test: /\.png|woff|woff2|eot|ttf|svg)$/,
            loader: "url-loader?limit=100000"
          },
          {
            test: /\.(html)$/,
            exclude: [/node_modules/,require.resolve("./src/client/index.js")],
            use: {
              loader: "html-loader"
            }
          }
        ]
      },
      devServer: {
        port: 3000,
        open: true,
        proxy: {
          "/api": "http://localhost:8080"
        }
      },
      plugins: [
        new CleanWebpackPlugin([outputDirectory]),
        new HtmlWebpackPlugin({
          template: "./public/index.html",
          favicon: "./public/favicon.ico"
        })
      ],
      resolve: {
        extensions: [".js", ".jsx"]
      }
    };

package.json

    {
      "name": "pth",
      "version": "1.0.0",
      "main": "src/server/index.js",
      "scripts": {
        "build": "webpack --mode production",
        "start": "npm run build && node ./src/server/index.js",
        "client": "webpack-dev-server --mode development --devtool inline-source-map --hot",
        "server": "nodemon ./src/server/index.js",
        "dev": "concurrently \"yarn run server\" \"yarn run client\""
      },
      "author": "BB",
      "license": "ISC",
      "dependencies": {
        "@babel/runtime": "^7.1.5",
        "axios": "^0.18.0",
        "babel-polyfill": "^6.26.0",
        "bcryptjs": "^2.4.3",
        "body-parser": "^1.18.3",
        "express": "^4.16.4",
        "express-jwt": "^5.3.1",
        "express-messages": "^1.0.1",
        "express-session": "^1.15.6",
        "express-validator": "^5.3.0",
        "jsonwebtoken": "^8.3.0",
        "mongoose": "^5.3.8",
        "passport": "^0.4.0",
        "passport-local": "^1.0.0",
        "prop-types": "^15.6.2",
        "react": "^16.6.0",
        "react-dom": "^16.6.0",
        "react-router": "^4.3.1",
        "react-router-dom": "^4.3.1",
        "universal-cookie": "^3.0.4"
      },
      "devDependencies": {
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.1.0",
        "@babel/plugin-transform-runtime": "^7.1.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "babel-eslint": "^10.0.0",
        "babel-loader": "^8.0.0",
        "babel-plugin-transform-decorators-legacy": "^1.3.5",
        "babel-preset-env": "^1.6.1",
        "babel-preset-react": "^6.24.1",
        "clean-webpack-plugin": "^1.0.0",
        "concurrently": "^4.0.0",
        "css-loader": "^1.0.1",
        "eslint": "^5.8.0",
        "eslint-config-airbnb": "^17.0.0",
        "eslint-plugin-import": "^2.11.0",
        "eslint-plugin-jsx-a11y": "^6.0.3",
        "eslint-plugin-react": "^7.7.0",
        "file-loader": "^1.1.11",
        "html-webpack-plugin": "^3.2.0",
        "nodemon": "^1.18.5",
        "style-loader": "^0.23.1",
        "url-loader": "^1.1.2",
        "webpack": "^4.5.0",
        "webpack-cli": "^3.0.8",
        "webpack-dev-server": "^3.1.10"
      }
    }