node.js - 尝试启动 React 应用程序，npm 启动错误为 "webpack-dev-server --hot"

Question

请注意，我已经尝试了相关堆栈溢出主题所建议的内容。我已经完成了启动 React 应用程序的教程，所有内容都已安装并运行到最后一部分。

我正在按照此处的教程进行操作:

React Tutorial

我研究了错误代码并重做了整个过程 3 次，以确保一切都匹配，但它就是行不通。

一切似乎都安装并工作正常，直到我到达教程的最底部，当它要求在命令提示符下键入 npm start 时。

这是我每次运行后都会遇到的错误:

这是我的package.json，完全按照教程的编写方式，并告诉我更改“test”“echo\“错误:未指定测试\”&& exit 1” 将 script 对象替换为 "start": "webpack-dev-server --hot"。

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "First React App",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "author": "Kranti Nebhwani",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "webpack": "^4.6.0",
    "webpack-dev-server": "^3.1.3"
  },
  "devDependencies": {
    "webpack-cli": "^2.0.15"
  }
}

最后是我在命令行中提到的 npm 注销的错误日志:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using npm@5.6.0
3 info using node@v8.11.1
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle reactapp@1.0.0~prestart: reactapp@1.0.0
6 info lifecycle reactapp@1.0.0~start: reactapp@1.0.0
7 verbose lifecycle reactapp@1.0.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle reactapp@1.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Kranti\Desktop\reactApp\node_modules\.bin;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\Skype\Phone\;C:\Program Files\Git\cmd;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\nodejs\;C:\Users\Kranti\AppData\Local\Microsoft\WindowsApps;C:\Users\Kranti\AppData\Local\atom\bin;C:\Users\Kranti\AppData\Local\Microsoft\WindowsApps;C:\Python27;C:\Users\Kranti\AppData\Roaming\npm
9 verbose lifecycle reactapp@1.0.0~start: CWD: C:\Users\Kranti\Desktop\reactApp
10 silly lifecycle reactapp@1.0.0~start: Args: [ '/d /s /c', 'webpack-dev-server --hot' ]
11 silly lifecycle reactapp@1.0.0~start: Returned: code: 1  signal: null
12 info lifecycle reactapp@1.0.0~start: Failed to exec start script
13 verbose stack Error: reactapp@1.0.0 start: `webpack-dev-server --hot`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid reactapp@1.0.0
15 verbose cwd C:\Users\Kranti\Desktop\reactApp
16 verbose Windows_NT 10.0.16299
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v8.11.1
19 verbose npm  v5.6.0
20 error code ELIFECYCLE
21 error errno 1
22 error reactapp@1.0.0 start: `webpack-dev-server --hot`
22 error Exit status 1
23 error Failed at the reactapp@1.0.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

去年，我在每次按照不同的教程进行 react 设置时都失败了，当我检查并确保一切正确时，这真的很令人沮丧。希望有更多经验的人能够看到我看不到的东西，或者知道错误是什么，因为我真的很想在我的系统上运行 React。目前我对 Mac 系统太穷了，尽管我听说在那里设置更容易，而且 YouTube 上的几乎所有教程都用 Mac 展示它。感谢您抽出时间。

Answer 1

本教程假设您使用的是 webpack 1(教程非常旧)。但是您安装了 webpack 4。从 webpack 版本 2 开始，属性加载器已重命名为规则，并进行了较小的更改。这就是为什么 webpack 告诉你你的 webpack.config.js 是错误的。所以你有两个选择:

重命名并更改您的 loader 属性以匹配新的规则属性。这可能有帮助:https://javascriptplayground.com/moving-to-webpack-2/

安装版本 1 中的 webpack:npm install webpack@1.x --save-dev

或者学习另一个教程。