Question

我是React.js的新手，我试图从tutorialspoint的教程中学习，但我遇到了错误。执行npm start命令时，这是控制台上的错误：

C:\Users\HP\Desktop\reactApp1> npm start
> reactapp1@1.0.0 start C:\Users\HP\Desktop\reactApp1.
> webpack-dev-server --hot

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 
module.js:540
    throw err; 

Error: Cannot find module .webpack-cli/bin/config-yargs. 
    at Function.Module._resolveFilenam (module.js:538:15) 
    at Function.Module. load (module.j5:668:25) 
    at Module.require (module.js,587.17) 
    at require (internal/module.js:11:18) 
    at Object•<anonymous> (C:\Users\HP\Desktop\reactApp1\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1) 

    at Module. compile (module.js:663:30) 
    at Object.Module. extensions. .js (module.js:656:10) 
    at Module.load (module.js:556:32) 
    at tryModuleLoad (module.js:699:12) 
    at Function.Module. load (modul.js:691:3) 
  npm ERR! code ELIFECYCLE 
  npm ERR! errno 1 
  npm ERR! reactapp@1.0.0 start: `webpack-dev-server --hot`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the reactapp@1.0.0 start script. 
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  npm ERR! A complete log of this run can be found in:
  npm ERR!     C:Users\HP\AppData\Roaming\npm-cache\_logs\2018-03-06T05_29_08_833Z-debug.log

的package.json

     {
      "name": "reactapp1",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "webpack-dev-server --hot"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "babel-core": "^6.26.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "webpack": "^4.0.1",
        "webpack-dev-server": "^3.1.0"
      },
      "devDependencies": {
        "babel-loader": "^7.1.3"
      }
    }

webpack.config.js

var config = {
    entry: './main.js',
    output: {
        path:'./',
        filename: 'index.js',
    },
    devServer: {
        inline: true,
        port: 8090
    },
    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'));

App.jsx

import React from 'react';
class App extends React.Component {
    render() {
        return (
            <div>
                Hello World!!!
            </div>
        );
    }
}
export default App;

的index.html

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>

Answer 1

我经历了同样的例子并遇到了同样的问题。所以按照上面的答案，我首先运行这个命令 -

npm install -g webpack-cli --save-dev

什么都没发生，仍然面临同样的问题。

然后我运行了这个命令 -

npm install webpack-cli --save-dev

问题已经解决但我又收到了另一个错误。

在新的Webpack版本中，他们也改变了模块属性。所以你还需要在webpack.config.js文件中进行更改。

module: {
        rules: [
          {
             test: /\.jsx?$/,
             exclude: /node_modules/,
             loader: 'babel-loader',
             query: {
                presets: ['es2015', 'react']
             }
          }
        ]
   }

基本上加载器被模块对象中的规则取代。

我做了这个改变，它对我有用。

希望它可以帮助其他人关注本教程。

要解决Invalid configuration object问题，我提到了这个答案。 https://stackoverflow.com/a/42482079/5892553

Answer 2

在webpack 3中，webpack本身和它的CLI曾经在同一个软件包中，但在版本4中，他们将两者分开来更好地管理它们。

要解决您的问题，请通过在命令行上运行npm install webpack-cli --save-dev来安装webpack-cli软件包，如同错误所示，与任何其他软件包一样。

Answer 3

遇到了同样的问题，上述解决方案没有运气 - 我尝试在全球以及本地安装webpack-cli，这很有用。

npm install -g webpack-cli --save-dev

这为我修好了。至少足以执行webpack --mode development.

Answer 4

为Webpack 4解决 - 我希望它适用于webpack 2以后

使用此命令

全局安装webpack-cli

npm i -g webpack-cli

因此，您需要分别运行以下两个命令，一个用于本地，另一个用于全局安装CLI。

npm i -D webpack-cli
npm i -g webpack-cli

它对我有用，我希望它对你也有效：）

Answer 5

您需要安装webpack服务器，而不是webpack-cli。看看this blog post中的第二点。试试npm i -g webpack@2.2.1。

Answer 6

错误控制台只是告诉您如何解决问题。似乎webpack模块依赖于webpack-cli模块。要解决此问题，只需运行命令npm install webpack-cli --save即可。它会正常工作。

Answer 7

第1步：首次运行

npm i webpack webpack-dev-server webpack-cli --save-dev

第2步：加载程序已替换为规则，因此请更改webpack.config.j中的代码。让我们改变你的webpack.config.js文件：

var config = {
    entry: './main.js',
    output: {
        path:'./',
        filename: 'index.js',
    },
    devServer: {
        inline: true,
        port: 8090
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}
module.exports = config;

Step3：现在转到package.json文件并在脚本选项中进行一些更改：

"scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
},

第4步：现在运行

npm start

在控制台

中

Answer 8

如果您想使用webpack-dev-server，则需要先安装webpack和webpack-cli。 webpack是一个存储编译器的模块，webpack-cli是命令行界面来运行它。否则，如果您更喜欢webpack-command webpack-cli的轻量级版本，则可能需要安装webpack和webpack-serve！

Answer 9

我解决了这个问题。

npm i webpack-cli @webpack-cli/init

npx webpack-cli init

希望为1提供帮助

CLI移动到一个单独的包中：webpack-cli

9 个答案: