npm webpack server启动报错“./”不是绝对路径

npm webpack server start error "./" is not an absolute path

我正在研究 React 教程 here,运行 遇到了启动 Webpack 服务器的问题。当 运行 npm start 我得到以下错误:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.output.path: The provided value "./" is not an absolute path!

这是我的目录结构:

reactApp
  + node_modules
  + App.jsx
  + index.html
  + main.js
  + package.json
  + webpack.comfig.js

我的 webpack 配置是

var config = {
   entry: './main.js',

   output: {
      path:'./',
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 8080
   },

   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

而main.js是

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

在 package.json 我有启动脚本

"scripts": {
    "start": "webpack-dev-server --hot"
  },

它似乎在 import App from './App.jsx';

上失败了

这是错误日志:

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@3.10.10
3 info using node@v6.9.4
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle react-app@1.0.0~prestart: react-app@1.0.0
6 silly lifecycle react-app@1.0.0~prestart: no script for prestart, continuing
7 info lifecycle react-app@1.0.0~start: react-app@1.0.0
8 verbose lifecycle react-app@1.0.0~start: unsafe-perm in lifecycle true
9 verbose lifecycle react-app@1.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\node\reactApp\node_modules\.bin;C:\ProgramData\Oracle\Java\javapath;C:\oracle\product.2.0\client_1\bin;C:\Program Files\Common Files\Microsoft Shared\Microsoft Online Services;C:\Program Files (x86)\Common Files\Microsoft Shared\Microsoft Online Services;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;c:\Program Files (x86)\Hewlett-Packard\HP ProtectTools Security Manager\Bin\;c:\Program Files\Intel\DMIX;C:\Program Files (x86)\Intel\Services\IPT\;C:\Program Files (x86)\Intel\OpenCL SDK.0\bin\x86;C:\Program Files (x86)\Intel\OpenCL SDK.0\bin\x64;C:\Strawberry\perl\bin;C:\Strawberry\perl\site\bin;C:\Strawberry\c\bin;C:\Dwimperl\perl\bin;C:\Dwimperl\perl\site\bin;C:\Dwimperl\c\bin;C:\Maven\apache-maven-3.3.9\bin;C:\Program Files\Java\jdk1.8.0_65\bin;C:\Maven\apache-maven-3.3.9\bin;C:\php;C:\Program Files\nodejs\;C:\ProgramData\Oracle\Java\javapath;C:\oracle\product.2.0\client_1\bin;C:\Program Files\Common Files\Microsoft Shared\Microsoft Online Services;C:\Program Files (x86)\Common Files\Microsoft Shared\Microsoft Online Services;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;c:\Program Files (x86)\Hewlett-Packard\HP ProtectTools Security Manager\Bin\;c:\Program Files\Intel\DMIX;C:\Program Files (x86)\Intel\Services\IPT\;C:\Program Files (x86)\Intel\OpenCL SDK.0\bin\x86;C:\Program Files (x86)\Intel\OpenCL SDK.0\bin\x64;C:\Strawberry\perl\bin;C:\Strawberry\perl\site\bin;C:\Strawberry\c\bin;C:\Dwimperl\perl\bin;C:\Dwimperl\perl\site\bin;C:\Dwimperl\c\bin;C:\Maven\apache-maven-3.3.9\bin;C:\Program Files\Java\jdk1.8.0_65\bin;C:\Users\hatch\AppData\Roaming\npm
10 verbose lifecycle react-app@1.0.0~start: CWD: C:\node\reactApp
11 silly lifecycle react-app@1.0.0~start: Args: [ '/d /s /c', 'webpack-dev-server --hot' ]
12 silly lifecycle react-app@1.0.0~start: Returned: code: 1  signal: null
13 info lifecycle react-app@1.0.0~start: Failed to exec start script
14 verbose stack Error: react-app@1.0.0 start: `webpack-dev-server --hot`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:877:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid react-app@1.0.0
16 verbose cwd C:\node\reactApp
17 error Windows_NT 6.1.7601
18 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
19 error node v6.9.4
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error react-app@1.0.0 start: `webpack-dev-server --hot`
22 error Exit status 1
23 error Failed at the react-app@1.0.0 start script 'webpack-dev-server --hot'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the react-app package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     webpack-dev-server --hot
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs react-app
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls react-app
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

我不明白这是什么问题?它无法导入 App.jsx 我认为...

谁能看出问题所在?

我正在使用 Windows 7、Node 6.9.4 和 NPM 3.10.10

输出路径必须是绝对路径而不是相对路径。您的 .\ 是相对于当前路径的,C:\Users... 是绝对的。

或者,您可以动态确定 webpack.config.js 中的绝对路径:

path: __dirname,

https://webpack.js.org/configuration/output/#output-path