npm start 使用 React.js 给出 webpack cli 错误答案

【问题标题】：npm start is giving webpack cli error with React.jsnpm start 使用 React.js 给出 webpack cli 错误
【发布时间】：2019-01-14 22:53:36
【问题描述】：

我刚开始从这个网站tutorailspoint and React.js学习react.js。

在我运行此命令npm start 时遵循所有设置信息后，会出现以下错误：

C:\Users\USER\Desktop\reactapp>npm start

> reactapp@0.0.1 start C:\Users\USER\Desktop\reactapp
> webpack-dev-server.cmd --content-base app

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
module.js:442
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\USER\Desktop\reactapp\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)

安装后

C:\Users\USER\Desktop\reactapp>npm start

> reactapp@0.0.1 start C:\Users\USER\Desktop\reactapp
> webpack-dev-server --hot

× ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).

npm ERR! Windows_NT 10.0.17134

我的 package.json 安装后：

 {
  "name": "reactapp",
  "version": "0.0.1",
  "description": "first test",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "webpack": "^4.16.5",
    "webpack-dev-server": "^3.1.5"
  },
  "devDependencies": {
    "webpack-cli": "^3.1.0"
  }
}

【问题讨论】：

你运行 npm i 了吗？
该错误告诉您“CLI 已移入单独的包：webpack-cli。”。如果您正在学习旧教程，则可能不会提及。试试npm i -D webpack-cli 然后npm start
不知道今天我才刚开始，你能建议如何运行npm i
如果你可以运行npm start，你已经安装了npm，也可以写npm i npm install
CodeSandbox 是在浏览器中开始的好方法。如果你不想在刚开始的时候自己配置 Webpack，你可以使用Create React App，这也很棒。

标签： node.js reactjs webpack webpack-dev-server webpack-4

【解决方案1】：

您收到的错误告诉您“CLI 已移入单独的包：webpack-cli。”。看起来您正在遵循的教程是从 webpack 包也随 CLI 一起提供的。您必须使用较新的版本单独安装。

npm i -D webpack-cli

您的第二个错误来自该 Webpack 曾经在 configuration.module.loaders 中定义了加载器，但后来它已更改为 configuration.module.rules。

webpack.config.js

var config = {
  // ...
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ["es2015", "react"]
        }
      }
    ]
  }
};

module.exports = config;

【讨论】：

是的，加载器到规则工作正常。但我会关注可能是反应组织网站。谢谢
@SumonBappi 太棒了！是的，创建 React App 或 CodeSandbox + React 文档是一个很好的开始。祝你好运！

【解决方案2】：

因为您是基于未指定 webpack 版本的旧文章，所以您似乎正在针对具有先前版本 webpack 配置的旧代码库运行较新版本的 webpack。您有 2 个选择：

回滚到正确的 webpack 版本，该版本将与您的 webpack 配置一起使用，并且不会要求您安装 CLI。
使用最新的 webpack 版本，安装 CLI 和其他任何必要的东西，并将你的 webpack 配置更新到最新的 API。

我还建议您寻找更新更好的帖子。

【讨论】：

【解决方案3】：

我认为你应该安装 webpack-cli： npm i -D webpack-cli

【讨论】：