webpack - 使用 html-webpack-plugin 版本 5.3.1 获取未定义的“点击”

Question

我在开发和生产构建命令上遇到“点击”错误。

TypeError：无法读取未定义的 html-webpack-plugin 的属性“tap”。 在 HtmlWebpackPlugin.apply (/Users/VirajMac-76/Desktop/super-simple-webpack/node_modules/html-webpack-plugin/index.js:40:31)

我的 webpack.config.js ：

  const path = require('path')
  const currentTask = process.env.npm_lifecycle_event;
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const HtmlWebpackPlugin = require("html-webpack-plugin");

 const config = {
  entry: './app/app.js',
  output: {
    filename: 'myBundle.[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    port: 8080,
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true
  },
  module: {
    // rule to apply loader to specific files only
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            // @babel/preset-env - industry standard for using react
            // @babel/preset-rea ct - jsx
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      },
      {
        test: /\.scss$/,
        // style-loader actually makes the css load in the browser from the javascript build
        // the order of the loaders matters
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
    ]
  },
  // for cache bursting 
  plugins: [new HtmlWebpackPlugin({ template: "./app/index.html" })]
};



config.plugins.push(new MiniCssExtractPlugin({ filename: 'main.[hash].css' }));

if (currentTask === 'build') {
  config.mode = "production";
}



module.exports = config;

我的 package.json ：

{
  "name": "learn-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.2",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.5",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.6.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "sass": "^1.32.13",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "validator": "^13.1.17",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

标签： webpackwebpack-4html-webpack-plugin