Question

自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;

Answer 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，以了解更多信息。

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

1 个答案: