安装依赖项时，为什么 webpackserve 会抛出错误“You need to install 'webpack-dev-server' for running 'webpackserve'”？

Question

问题：

我正在尝试通过运行

npm run start

来启动我的 React 应用程序。 然后，当我已经安装了依赖项“webpack-dev-server”时，这会抛出错误“您需要安装“webpack-dev-server”来运行“webpack-server””。

我尝试过的：

• 我已多次尝试删除我的node_modules并且 package.lock.js 文件并再次运行

  npm install

  但没有 成功。 （我还可以看到 webpack-dev-server 安装在我的 node_modules 文件夹）

• 我也尝试过这个问题的解决方案和建议，但没有成功： webpack-dev-server 在我的项目中不起作用

有用信息：

我的控制台输出：

❯ npm run start

> [email protected] start
> webpack serve --open --hot --config webpack.dev.js --node-env development --stats verbose

[webpack-cli] You need to install 'webpack-dev-server' for running 'webpack serve'.
TypeError: Cannot read properties of undefined (reading 'getArguments')

我的package.json：

{
  "name": "farma-form-vaccination-registration",
  "version": "0.1.0",
  "homepage": ".",
  "private": true,
  "dependencies": {
    "@types/node": "^14.14.14",
    "antlr4": "^4.7.1",
    "html-to-react": "^1.4.7",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-fhirclient": "^0.1.1",
    "semantic-ui-css": "^2.5.0",
    "semantic-ui-react": "^2.1.4"
  },
  "scripts": {
    "start": "webpack serve --open --hot --config webpack.dev.js --node-env development --stats verbose",
    "build": "webpack --config webpack.prod.js --node-env=production --stats-error-details",
    "test": "node scripts/test.js"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "IE 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "IE 11"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.21.0",
    "@babel/preset-env": "^7.18.2",
    "@typescript-eslint/eslint-plugin": "^5.55.0",
    "@typescript-eslint/parser": "^5.55.0",
    "babel-loader": "8.1.0",
    "babel-plugin-es6-promise": "^1.1.1",
    "babel-plugin-named-asset-import": "^0.3.7",
    "babel-plugin-react-css-modules": "^5.2.6",
    "babel-preset-react-app": "^10.0.0",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "copy-webpack-plugin": "^11.0.0",
    "core-js": "^3.31.1",
    "css-loader": "4.3.0",
    "css-minimizer-webpack-plugin": "^4.2.2",
    "file-loader": "^6.1.1",
    "fs-extra": "^9.0.1",
    "html-webpack-plugin": "5.5.0",
    "html-webpack-tags-plugin": "3.0.2",
    "https-browserify": "^1.0.0",
    "lodash-webpack-plugin": "^0.11.6",
    "mini-css-extract-plugin": "2.7.2",
    "mini-svg-data-uri": "^1.4.4",
    "pnp-webpack-plugin": "1.6.4",
    "postcss-flexbugs-fixes": "5.0.2",
    "postcss-loader": "7.0.2",
    "postcss-normalize": "10.0.1",
    "postcss-preset-env": "8.0.1",
    "postcss-safe-parser": "6.0.0",
    "prettier": "^2.8.3",
    "querystring-es3": "^0.2.1",
    "react-dev-utils": "^11.0.3",
    "resolve": "1.18.1",
    "resolve-url-loader": "^5.0.0",
    "sass-loader": "^10.0.5",
    "semver": "7.3.2",
    "stream-http": "^3.2.0",
    "style-loader": "1.3.0",
    "terser-webpack-plugin": "5.3.6",
    "ts-pnp": "1.2.0",
    "url": "^0.11.0",
    "url-loader": "4.1.1",
    "webpack": "^5.75.0",
    "webpack-bundle-analyzer": "^4.8.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.15.1",
    "webpack-manifest-plugin": "5.0.0",
    "workbox-webpack-plugin": "6.5.4"
  }
}

我的 webpack.dev.js：

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { HotModuleReplacementPlugin } = require('webpack');

module.exports = merge(common, {
   mode: 'development',
   output: {
    path: path.resolve(__dirname, "dist"), // output folder
    publicPath: "/",
    //clean: true,
    filename: '[name].[contenthash:8].js',
  },
    module: {
        rules: [
          {
              test: /.s?css$/,
              use: [
                {
                loader: 'style-loader'
              }, 
              {
                loader: 'css-loader',
                
      
                },
               {
                loader: 'postcss-loader'
               }

            ],
          },
      ],
    },
devtool: 'inline-source-map',
   devServer: {
    static: {
        directory: path.resolve("dist"),        
      },
      devMiddleware: {
        writeToDisk: true,
      },
      port: 3000,
   },plugins: [

  ],
});

节点版本：

❯ node --version
v16.15.1

Npm 版本：

❯ npm --version
9.8.1

Answer 1

就我而言，我的 package.json 中没有

webpack

和

webpack-cli