CLI移动到一个单独的包中：webpack-cli
[英]The CLI moved into a separate package: webpack-cli
问题描述
I'm new to React.js and I'm trying to learn from the tutorials on tutorialspoint but I faced error. 
我是React.js的新手，我正在尝试从tutorialspoint的教程中学习，但我遇到了错误。 Here is the error on console when I execute npm start command: 执行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 的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 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 main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
App.jsx App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
index.html 的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>
9 个解决方案
解决方案1
16 2018-03-11 16:42:50
I went through the same example and faced the same issue. 我经历了同样的例子并遇到了同样的问题。 So following the above answers I first ran this command - 所以按照上面的答案，我首先运行这个命令 -
npm install -g webpack-cli --save-dev
Nothing happened and was still facing the same issue. 什么也没发生，仍然面临同样的问题。
Then I ran this command - 然后我跑了这个命令 -
npm install webpack-cli --save-dev
The issue was solved but I was getting another error. 这个问题已经解决，但我又遇到了另一个错误。
Turns out in the new Webpack version they have changed the module attributes also. 事实证明，在新的Webpack版本中，他们也改变了模块属性。 So you need to make change in the webpack.config.js file also. 所以你需要在webpack.config.js文件中进行更改。
module: { rules: [ { test: /\\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] }
So basically loaders is replaced by rules inside the module object. 所以基本上加载器被模块对象内的规则所取代。
I made this change and it worked for me. 我做了这个改变，它对我有用。
Hope it helps other people who are following this tutorial. 希望它能帮助正在学习本教程的其他人。
To resolve the Invalid configuration object issue, I referred to this answer. 要解决Invalid configuration object问题，我提到了这个答案。 https://stackoverflow.com/a/42482079/5892553 https://stackoverflow.com/a/42482079/5892553
解决方案2
13 2018-03-04 05:37:59
In webpack 3, webpack itself and the CLI for it used to be in the same package, but in version 4, they've separated the two to manage each of them better. 在webpack 3中，webpack本身和它的CLI曾经在同一个包中，但在版本4中，他们将两者分开来更好地管理它们。
To solve your issue, install the webpack-cli package as the error suggests by running npm install webpack-cli --save-dev on the command line, same as you would any other package. 要解决您的问题，请按照错误建议安装webpack-cli软件包，方法是在命令行上运行npm install webpack-cli --save-dev ，就像使用任何其他软件包一样。
解决方案3
6 2018-03-04 20:27:26
Was having the same problem, and no luck with the above solutions - I tried installing webpack-cli globally as well as locally and this worked. 有同样的问题，并没有上述解决方案的运气 - 我尝试在全球和本地安装webpack-cli，这很有效。
npm install -g webpack-cli --save-dev
This fixed it for me. 这为我修好了。 At least enough to perform webpack --mode development. 至少足以执行webpack --mode development.
解决方案4
2 2018-04-11 08:23:41
Solved for Webpack 4 - I hope it works for webpack 2 onwards 解决了Webpack 4 - 我希望它适用于webpack 2以后
Install webpack-cli globally too by using this command 使用此命令也可以全局安装webpack-cli
npm i -g webpack-cli
So in total you need to run two following commands one for local and other for install CLI globally respectively. 因此，总共需要运行以下两个命令，一个用于本地，另一个用于全局安装CLI。
npm i -D webpack-cli
npm i -g webpack-cli
it works for me I hope it will work for you too :) 它适用于我，我希望它也适合你:)
解决方案5
1 2018-03-27 22:37:14
You need install webpack server, not webpack-cli. 您需要安装webpack服务器，而不是webpack-cli。 Have a look at the 2nd point in this blog post . 看看这篇博文中的第二点。 Try npm i -g webpack@2.2.1 . 试试npm i -g webpack@2.2.1 。
解决方案6
1 2018-05-18 23:43:09
Step1: First run 第一步：第一次运行
npm i webpack webpack-dev-server webpack-cli --save-dev
Step2: Loaders are replaced with rules so change code in your webpack.config.j. 第2步：加载器被规则替换，因此更改webpack.config.j中的代码。 Let's change your webpack.config.js file: 让我们改变你的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: Now go to your package.json file and make some changes in your scripts option: 第3步：现在转到package.json文件并在脚本选项中进行一些更改：
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
Step4: Now run 第4步：现在运行
npm start
in console 在控制台
解决方案7
1 2018-11-29 06:38:29
解决方案8
0 2018-06-09 11:34:57
If you want to use webpack-dev-server , you need to install webpack and webpack-cli first. 如果要使用webpack-dev-server ，则需要先安装webpack和webpack-cli 。 webpack is a module which store compiler and, webpack-cli is command-line-interface to run it. webpack是一个存储编译器的模块， webpack-cli是运行它的命令行界面。 Otherwise, if you prefer webpack-command , a much more light-weight version of webpack-cli , you may need to install webpack and webpack-serve ! 否则，如果你更喜欢webpack-command ，一个更轻量级的webpack-cli ，你可能需要安装webpack和webpack-serve ！
解决方案9
-1 2018-03-04 05:39:26
The error console is simply telling you how to resolve the issue. 错误控制台只是告诉您如何解决问题。 Seems like webpack module is dependent on webpack-cli module. 看起来像webpack模块依赖于webpack-cli模块。 To resolve the issue, just run the command npm install webpack-cli --save . 要解决此问题，只需运行命令npm install webpack-cli --save 。 it would just work fine. 它会工作正常。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.