我不是一个很好的ReactMaven，在很长一段时间没有更新我的webapp之后，我试图编译应用程序来显示我所做的一些修改，但在这个过程中我遇到了这个问题：

TypeError: Cannot read properties of undefined (reading 'tap')
    at HtmlWebpackPlugin.apply (/home/josecarlos/Workspace/nodejs/basketmetrics3/node_modules/html-webpack-plugin/index.js:40:31)
    at webpack (/home/josecarlos/Workspace/nodejs/basketmetrics3/node_modules/webpack/lib/webpack.js:51:13)
    at processOptions (/home/josecarlos/Workspace/nodejs/basketmetrics3/node_modules/webpack-cli/bin/cli.js:272:16)
    at /home/josecarlos/Workspace/nodejs/basketmetrics3/node_modules/webpack-cli/bin/cli.js:364:3
    at Object.parse (/home/josecarlos/Workspace/nodejs/basketmetrics3/node_modules/webpack-cli/node_modules/yargs/yargs.js:576:18)
    at /home/josecarlos/Workspace/nodejs/basketmetrics3/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/home/josecarlos/Workspace/nodejs/basketmetrics3/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/josecarlos/Workspace/nodejs/basketmetrics3/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47

为了编译，我使用了package.json中的“dev”脚本。

package.json

{
  "main": "server.js",
  "scripts": {
    "clean": "rm -rf ./dist",
    "clean-build": "rm -rf ./build",
    "_comment0": "Script para arrancar webpack como servidor de desarrollo del front-page",
    "dev-webpack": "NODE_ENV=development webpack-dev-server --hot --mode development",
    "_comment1": "Scripts para generar el código de front-end de desarrollo y usar el código de desarrollo del servidor",
    "compile-dev": "npm run clean && NODE_ENV=development webpack -d --config ./webpack.config.babel.js --progress",
    "dev": "npm run clean && npm run compile-dev && cross-env NODE_ENV=development nodemon --exec babel-node src/server/server.js --ignore ./src/client",
    "_comment2": "Script para generar el código de producción del front-end",
    "compile": "npm run clean && NODE_ENV=production webpack -p --config ./webpack.config.babel.js --progress",
    "_comment3": "Script para generar el código de servidor de producción",
    "build-server": "npm run clean-build && NODE_ENV=production babel src -d ./build --ignore ./src/client",
    "_comment4": "Script para arrancar el servidor como si estuvieramos en AWS",
    "aws-start": "cross-env NODE_ENV=production node ./build/server/server.js",
    "test": "jest babel-polyfill ./test",
    "test-mocha": "mocha --recursive --require @babel/register"
  },
  "license": "ISC",
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "@material-ui/core": "^4.9.7",
    "@material-ui/icons": "^4.11.3",
    "@material-ui/lab": "^4.0.0-alpha.46",
    "bootstrap": "^4.3.1",
    "cors": "^2.8.5",
    "create-react-app": "^1.2.1",
    "cross-env": "^5.2.0",
    "d3": "^7.8.5",
    "dotenv": "^7.0.0",
    "express": "^4.17.1",
    "express-graphql": "^0.7.1",
    "graphql": "^14.4.2",
    "graphql-disable-introspection": "^1.1.0",
    "helmet": "^3.21.2",
    "jquery": "^3.5.1",
    "morgan": "^1.9.1",
    "mysql2": "^1.6.5",
    "popper.js": "^1.15.0",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-bootstrap-table-next": "^1.1.0",
    "react-bootstrap-table2-paginator": "^2.0.7",
    "react-bootstrap-table2-toolkit": "^2.1.2",
    "react-cookie-consent": "^5.1.3",
    "react-dom": "^16.8.6",
    "react-ga": "^3.1.2",
    "react-multi-language": "^0.4.2",
    "react-router-dom": "^5.0.1",
    "react-router-scroll-top": "^0.2.1",
    "react-simple-tooltip": "^2.6.1",
    "react-twitter-embed": "^3.0.3",
    "sequelize": "^6.3.4",
    "validator": "^13.11.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.5.5",
    "@babel/node": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-register": "^6.26.0",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^5.5.3",
    "jest": "^26.0.1",
    "jshint": "^2.10.3",
    "mini-css-extract-plugin": "^0.5.0",
    "mocha": "^10.2.0",
    "nodemon": "^2.0.2",
    "path": "^0.12.7",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.38.0",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^4.15.1"
  }
}

webpack.config.babel.js

// Import webpack module
import webpack from "webpack";
//Import path module
import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import dotenv from "dotenv";
import fs from "fs";

const devMode = process.env.NODE_ENV !== "production";

console.log("devMode: " + process.env.NODE_ENV);

/**
 * Code to get the values of environment variables during compilation time for the front-end
 */
//Get the root path. Our .env files and webpack.config.babel.js files are in the root path
const currentPath = path.join(__dirname);
const basePath = currentPath + "/.env";
// We're concatenating the environment name to our filename to specify the correct env file!
const envPath = basePath + "." + process.env.NODE_ENV;
// Check if the file exists, otherwise fall back to the production .env
const finalPath = fs.existsSync(envPath) ? envPath : basePath;
console.log("webpack.config.babel.js finalPath: " + finalPath);
// Set the path parameter in the dotenv config
const fileEnv = dotenv.config({ path: finalPath }).parsed;
// reduce it to a nice object, the same as before
const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
  prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
  return prev;
}, {});


module.exports = {
    entry: "./src/client/index.js", //set entry file

    output: {
        path: path.resolve("dist/assets"),
        filename: "js/[name].bundle.js",
        chunkFilename: "js/[name].bundle.js",
        publicPath: "/assets"   //It's mandatory to define this publicPath to get access to the website when we reload pages
                                //or we access to them directly with url's which have directories of second level like 
                                //http://localhost:4000/directory-level-1/directory-level-2
    },
    optimization: {
        splitChunks : {
            chunks: "all",
            minSize: 30000,
            maxSize: 100000,
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/client/index.html",    //where is our template
            filename: "../index.html",              //where we are going to put our index.html inside the output directory
            favicon: "./src/client/img/favicon-96x96.png",
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }            
        }),
        new MiniCssExtractPlugin({
            filename: "css/bundle.css",
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }             
        }),
        //With this entry we can get access to the environment variable for front-end
        new webpack.DefinePlugin(envKeys),
    ],
    //It help us to detect errors. 
    devtool: "source-map", 
    // Set dev-server configuration
    devServer: {
        inline: true,
        contentBase: './dist', 
        port: 3000,
        historyApiFallback: true
    },

    // Add babel-loader to transpile js and jsx files
    module: { 
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:[
                    { 
                        loader: "babel-loader",
                        query: {
                            presets: [
                                "@babel/preset-react"
                            ]
                        }
                    }
                ]
            },
            {
                use: [
                    devMode ? "style-loader" : MiniCssExtractPlugin.loader, 
                    "css-loader"],
                test: /\.css$/
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "saas-loader", 
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    publicPath: "/assets/images/",
                    outputPath: "./images/"
                }
            },
            {
                test: /\.(eot|ttf|woff|woff2)$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    publicPath: "/assets/fonts/",   //It's mandatory to get access to the fonts when we reload pages or access directly
                    outputPath: "./fonts/"
                }
            }
        ]
    },
};

我做错了什么？如何解决此问题？