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:\Users\XXX\Desktop\reactJs-tutorial\npm-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

如果有，请尝试更新node和npm，尝试npm install -g webpack-cli

Answer 2

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

无法与es2015和webpack构建反应

2 个答案: