Javascript 错误：找不到模块'；html网页包插件'；-网页包（React）

我尝试创建一个基本的React应用程序，下面是Webpack4

在安装“html网页包插件”之前，我没有遇到任何错误。但是，一旦我运行命令“npm run start”，我就会不断得到以下错误：

**Error: Cannot find module 'html-webpack-plugin'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)**

我试图通过在全局和本地安装包来使用以下两个线程解决这个问题，但没有任何帮助

请查看下面的我的代码：

{
  "name": "react_website",
  "version": "1.0.0",
  "description": "Website using React and Webpack",
  "main": "index.js",
  "scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.2",
    "webpack-cli": "^2.1.5"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  }
}

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
  })
],
};

{
  "presets": ["env", "react"]
}

package.json:

{
  "name": "react_website",
  "version": "1.0.0",
  "description": "Website using React and Webpack",
  "main": "index.js",
  "scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.2",
    "webpack-cli": "^2.1.5"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  }
}

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
  })
],
};

{
  "presets": ["env", "react"]
}

webpack.config.js:

{
  "name": "react_website",
  "version": "1.0.0",
  "description": "Website using React and Webpack",
  "main": "index.js",
  "scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.2",
    "webpack-cli": "^2.1.5"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  }
}

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
  })
],
};

{
  "presets": ["env", "react"]
}

-.babelrc:

{
  "name": "react_website",
  "version": "1.0.0",
  "description": "Website using React and Webpack",
  "main": "index.js",
  "scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.2",
    "webpack-cli": "^2.1.5"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  }
}

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
  })
],
};

{
  "presets": ["env", "react"]
}

使用此命令：

npm i --save-dev html-webpack-plugin

---

您也可以使用下面的命令来解决错误

npm install html-webpack-plugin

---

尝试删除节点模块：

rm-rf节点模块

接下来重新安装所有开发依赖项

npm安装

最后，重新安装html网页包插件--save dev

我还建议确保所有目录路径都正确，并且您位于实际的项目文件夹中。这种情况很少见，但有时也会发生。
我的建议是，最好删除完整的节点模块，然后尝试npm Install。我做到了，但不起作用！！你能运行npm缓存clean-f吗。检查一下。它基本上会清除包缓存更新：我注意到我看不到“html网页包插件”的版本。它显示为未安装。但是，我已经安装了它，它被加载到“package.json”文件夹中。是的，所以你的包没有被安装。请在终端上查看日志。如果有任何权限问题。大多数时候都是这样。尝试单独安装html网页包插件。npm安装html网页包插件--save-dev。如果未安装，请尝试使用sudo，如果您在Windows上，请使用管理权限。我在package.json中有
html网页包插件
，类似于OP，但网页包未检测到它。我还删除了我的节点模块，并再次尝试了整个过程。还是没什么。有没有办法获得更多关于webpack正在查找的位置的信息？这不会增加现有的答案。事实上，这比现有答案更糟糕，因为您将其作为依赖项而不是开发人员依赖项安装。