错误：错误：找不到模块“webpack-cli/bin/config-yargs”需要堆栈：答案

【问题标题】：ERROR: Error: Cannot find module 'webpack-cli/bin/config-yargs' Require stack:错误：错误：找不到模块“webpack-cli/bin/config-yargs”需要堆栈：
【发布时间】：2021-02-24 10:57:37
【问题描述】：

自 1 周以来，我一直在尝试运行以下代码。如果我错过了什么，我已经重写了大约 4-5 次相同的代码。也尝试寻找解决方案，但我无法检测到错误到底是什么？

错误：找不到模块“webpack-cli/bin/config-yargs” 需要堆栈：

C:\Users\NFC\Desktop\reactapp\node_modules\webpack-dev-server\bin\webpack-dev-server.js

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},


 devServer: {
   
   inline: true,
  
   port: 8001
},

module: {
  rules: [
     {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
           presets: ['es2015', 'react']
        }
     }
  ]
 },
 plugins:[
  new HtmlWebpackPlugin({
     template: './index.html'
  })
 ]
}

package.json

 {
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
 "author": "",
 "license": "ISC",
 "dependencies": {
 "react": "^17.0.1",
 "react-dom": "^17.0.1",
 "webpack": "^5.4.0",
 "webpack-cli": "^4.2.0",
 "webpack-dev-server": "^3.11.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.2.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^4.5.0"
}
}

index.html

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <title>React App</title>
</head>
<body>
  <div id = "app"></div>
  <script src = 'index_bundle.js'></script>
</body>
</html>

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

.babelrc

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

App.js

import React, { Component } from 'react';
class App extends Component{
render(){
  return(
     <div>
        <h1>Hello World</h1>
     </div>
  );
  }
  }
export default App;

【问题讨论】：

标签： reactjs webpack

【解决方案1】：

您似乎正在使用 webpack-cli v4，尝试将您的 start 脚本从 webpack-dev-server --mode development --open --hot 更新为 webpack serve。您可以在 webpack-dev-server 上查看此问题 https://github.com/webpack/webpack-dev-server/issues/2424 了解更多信息。

【讨论】：

我检查了这个。但是，没有一个答案对我有帮助。显然，在 github 上分享的任何答案都不适用于大多数人。
然后在 github 上创建一个可重现的存储库并在这里分享，以便人们检查。
谢谢，没注意到对于 webpack 5，webpack-dev-server 改为 webpack serve。