React JS 和 Webpack 在“npm run start”上抛出错误“找不到模块'webpack-cli/bin/config-yargs'”答案

【问题标题】：React JS and Webpack throwing error "Cannot find module 'webpack-cli/bin/config-yargs'" on "npm run start"React JS 和 Webpack 在“npm run start”上抛出错误“找不到模块'webpack-cli/bin/config-yargs'”
【发布时间】：2020-11-01 18:19:48
【问题描述】：

我开始从头开始构建一个 React JS 项目。我正在使用 Webpack 来编译资产并进行开发。但是当我运行“npm run start”时它没有按预期工作。

这是我的 package.json 文件。

{
  "name": "way-ui-react",
  "version": "1.0.0",
  "description": "Way UI for React JS",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --hot --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Wai Yan Hein",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^5.0.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.0",
    "postcss": "^8.1.4",
    "postcss-loader": "^4.0.4",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.3.2",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "autoprefixer": "^10.0.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

这是我的项目结构。

这是我的 webpack.config.js 文件

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        chunkFilename: '[id].js',
        publicPath: ''
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: "[name]__[local]___[hash:base64:5]",
                            },
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [ 'autoprefixer', {}, ],
                                ],
                            },
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                loader: 'url-loader?limit=10000&name=img/[name].[ext]'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html',
            filename: 'index.html',
            inject: 'body'
        })
    ]
};

当我运行“npm run start”时，出现以下错误。

> way-ui-react@1.0.0 start C:\Users\Acer\Desktop\way-ui-react
> webpack-dev-server --open --hot --mode development

internal/modules/cjs/loader.js:613
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- C:\Users\Acer\Desktop\way-ui-react\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15)
    at Function.Module._load (internal/modules/cjs/loader.js:526:27)
    at Module.require (internal/modules/cjs/loader.js:666:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (C:\Users\Acer\Desktop\way-ui-react\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:826:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! way-ui-react@1.0.0 start: `webpack-dev-server --open --hot --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the way-ui-react@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Acer\AppData\Roaming\npm-cache\_logs\2020-11-01T18_14_24_782Z-debug.log

我的项目出了什么问题，我该如何解决？

【问题讨论】：

标签： reactjs npm webpack

【解决方案1】：

在您的 package.json 中，"start": "webpack-dev-server --open --hot --mode development" 用于 webpack 4 版本。

但是在你已经安装的 webpack 5 中必须是：

"start": "webpack serve"

更多信息：Using webpack-dev-server 在 Webpack 文档中

【讨论】：