尝试启动反应应用程序，npm启动错误“webpack-dev-server --hot”

Question

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

我在这里关注教程：

React Tutorial

我已经研究了错误代码并重复整个过程3次，确保一切都匹配，但它不起作用。

在我要求在命令提示符下键入npm start时，所有内容似乎都安装并正常工作，直到我到达教程的最底层。

这是我每次运行后得到的错误：

这是我的package.json，完全按照教程编写的方式，并告诉我将"test" "echo \"Error: no test specified\" && 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 ]

我在去年每次参加不同的教程时都没有多次设置反应，但是当我检查并确保一切正确时，它真的很失败。希望有经验的人可以看到我不知道的东西，或者知道错误是什么，因为我真的希望在我的系统上运行起来。我现在对于Mac系统来说太穷了，虽然我听说它在那里设置起来比较容易，而youtube上的所有教程都用mac显示它。谢谢你的时间。

Answer 1

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

重命名并更改您的装载道具以匹配新规则道具。这可能会有所帮助：https://javascriptplayground.com/moving-to-webpack-2/

在版本1中安装webpack：npm install webpack@1.x --save-dev

或者参加另一个教程。