无法用 es2015 和 webpack 构建 react

Question

我是reactjs的新手。我安装了所有必要的模块，并尝试使用简单的 js 和 html 文件测试构建是否有效，但在运行 webpack 构建时出现以下错误。我在下面的错误日志中没有看到任何具体错误。你能帮我在这里找到问题吗？

> npm run build
> webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234
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
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\
node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v7.4.0
npm ERR! npm  v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! hello@1.0.0 build: `webpack -d && webpack-dev-server --content-base src
/ --inline --hot --port 1234`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hello@1.0.0 build script 'webpack -d && webpack-dev-serve
r --content-base src/ --inline --hot --port 1234'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the hello package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack -d && webpack-dev-server --content-base src/ --inline --hot
 --port 1234
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs hello
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls hello
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!     C:UsersXXXDesktopreactJs-tutorialnpm-debug.log
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\
node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v7.4.0
npm ERR! npm  v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! hello@1.0.0 start: `npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hello@1.0.0 start script 'npm run build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the hello package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs hello
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls hello
npm ERR! There is likely additional logging output above.

下面显示的是包含所有依赖项的 package.json：

    {
  "name": "hello",
  "version": "1.0.0",
  "description": "React test",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "npm run build",
    "build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
  },
  "author": "myself",
  "license": "ISC",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.1.1",
    "webpack-dev-server": "^3.1.0"
  }
}

下面显示的是 webpack.config

var path = require('path');
module.exports = {
    entry: path.resolve(__dirname, 'src') + '/app/index.js',
    output: {
        path: path.resolve(__dirname, 'dist') + '/app', 
        filename: 'bundle.js',
        publicPath: '/app/'
    },
    module: {
        loaders: [ 
            {
                test: /.js$/, 
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader', 
                query: {
                    presets: ['react', 'es2015'] 
                }
            },
            {
                test: /.css$/,
                loader: 'style-loader!css-loader' 
            }
        ]
    }
};

Answer 1

您是否尝试过更新节点和npm，如果有，请尝试npm install -g webpack-cli

Answer 2

更新你的节点.js和npm版本。删除/node_modules 文件夹中的所有文件并运行 sudo npm install -g webpack-cli