Javascript CLI 移动到一个单独的包中：webpack-cli
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49092291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The CLI moved into a separate package: webpack-cli
提问by prakash kumar
I'm new to React.js and I'm trying to learn from the tutorials on tutorialspointbut I faced error. Here is the error on console when I execute npm start command:
我是 React.js 的新手，我正在尝试从 tutorialspoint 上的教程中学习，但我遇到了错误。这是我执行 npm start 命令时控制台上的错误：
C:\Users\HP\Desktop\reactApp1> npm start
> [email protected] 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! [email protected] start: `webpack-dev-server --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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\_logs18-03-06T05_29_08_833Z-debug.log
package.json
包.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
主文件
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
App.jsx
应用程序.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
index.html
索引.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>
回答by Rito
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. So you need to make change in the webpack.config.js file also.
事实证明，在新的 Webpack 版本中，他们也更改了模块属性。因此，您还需要在 webpack.config.js 文件中进行更改。
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}So basically loadersis replaced by rulesinside the moduleobject.
所以基本上加载器被模块对象内的规则替换。
I made this change and it worked for me.
我做了这个改变，它对我有用。
Hope it helps other people who are following this tutorial.
希望它可以帮助其他正在学习本教程的人。
To resolve the Invalid configuration objectissue, I referred to this answer.
https://stackoverflow.com/a/42482079/5892553
为了解决这个Invalid configuration object问题，我参考了这个答案。
https://stackoverflow.com/a/42482079/5892553
回答by kingdaro
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-devon the command line, same as you would any other package.
要解决您的问题，请按照错误提示通过npm install webpack-cli --save-dev在命令行上运行来安装 webpack-cli 包，就像安装任何其他包一样。
回答by Ben Holmquist
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.
回答by Sabir Hussain
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 :)
它对我有用，我希望它也对你有用:)
回答by sachin bhandari
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. Let's change your webpack.config.js file:
步骤 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: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
Step4：现在运行
npm start
in console
在控制台中
回答by user9668868
回答by Abel Condori Malmaceda
You need install webpack server, not webpack-cli. Have a look at the 2nd point in this blog post.
Try npm i -g [email protected].
您需要安装 webpack 服务器，而不是 webpack-cli。看看这篇博文中的第二点。试试npm i -g [email protected]。
回答by Clite Tailor
If you want to use webpack-dev-server, you need to install webpackand webpack-clifirst. webpackis a module which store compiler and, webpack-cliis command-line-interface to run it. Otherwise, if you prefer webpack-command, a much more light-weight version of webpack-cli, you may need to install webpackand webpack-serve!
如果你想使用webpack-dev-server，你需要安装webpack和webpack-cli第一。webpack是一个存储编译器的模块，webpack-cli是运行它的命令行界面。否则，如果您更喜欢 的webpack-command轻量级版本webpack-cli，您可能需要安装webpack和webpack-serve！
回答by Anadi Sharma
The error console is simply telling you how to resolve the issue. Seems like webpackmodule is dependent on webpack-climodule. To resolve the issue, just run the command npm install webpack-cli --save. it would just work fine.
错误控制台只是告诉您如何解决问题。似乎webpack模块依赖于webpack-cli模块。要解决此问题，只需运行命令npm install webpack-cli --save。它会正常工作。
