使用 html-webpack-plugin 版本 5.3.1 获取 undefined 的“tap”

问题描述

我在开发和生产构建命令中遇到“tap”错误。

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"
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html-webpack-plugin webpack webpack webpack webpack-4