CLI 移动到一个单独的包中：webpack-cli
Posted
技术标签:
【中文标题】CLI 移动到一个单独的包中：webpack-cli【英文标题】：The CLI moved into a separate package: webpack-cli 【发布时间】：2018-08-12 00:51:32 【问题描述】：我是 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>
【问题讨论】：
只需使用 npm install --save-dev webpack@3.10.0 降级到 webpack 3 【参考方案1】：在 webpack 3 中，webpack 本身和它的 CLI 曾经在同一个包中，但在版本 4 中，它们将两者分开以更好地管理它们。
要解决您的问题，请按照错误提示安装 webpack-cli 包，方法是在命令行上运行 npm install webpack-cli --save-dev，就像安装任何其他包一样。
【讨论】：
您是否在当前目录设置为项目文件夹的情况下运行命令？ 已安装 cli 和 webpack(npm install -g webpack)...仍然出现同样的错误，我在我的项目文件夹中... webpack 和 webpack-cli both 必须在本地安装最新版本。 @prakashkumar 你让它工作了吗？我有同样的问题【参考方案2】：错误控制台只是告诉您如何解决问题。似乎webpack 模块依赖于webpack-cli 模块。要解决此问题，只需运行命令npm install webpack-cli --save。它会正常工作的。
【讨论】：
真的！！它会给你同样的错误吗？你能在node_modules文件夹中找到webpack-cli目录吗？【参考方案3】：
遇到了同样的问题，但上述解决方案没有运气 - 我尝试在全局和本地安装 webpack-cli，并且成功了。
npm install -g webpack-cli --save-dev
这为我解决了问题。至少够执行webpack --mode development.
【讨论】：
那么为什么这行得通...如果有人可以告诉我，会有所帮助:) 我的想法...我从 npm init 开始在我的本地项目中启动一个包。根据我正在观看的一些视频，我已经在这里以及全球安装了 webpack。全局安装时，这告诉命令行这是我要引用的 webpack。但是，当我安装 webpack-cli 时，我从未全局安装过。因此，在搜索它时，它正在寻找全局节点模块。对吗？【参考方案4】：我经历了同样的例子并遇到了同样的问题。所以按照上面的答案，我首先运行了这个命令-
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']
]
所以基本上 loaders 被 module 对象内的 rules 取代。
我做了这个改变，它对我有用。
希望它对正在学习本教程的其他人有所帮助。
为了解决Invalid configuration object 问题，我参考了这个答案。
https://***.com/a/42482079/5892553
【讨论】：
如果我没记错的话，-g 不会全局安装软件包并忽略任何--save 或--save-dev 标志吗？这可能就是您在那里的第一个命令不起作用的原因
非常感谢你拯救了我的一天！【参考方案5】：
你需要安装 webpack 服务器，而不是 webpack-cli。看看this blog post 中的第二点。
试试npm i -g webpack@2.2.1。
【讨论】：
【参考方案6】：已为 Webpack 4 解决 - 我希望它适用于 webpack 2 及以后的版本
使用此命令也可以全局安装 webpack-cli
npm i -g webpack-cli
因此，您总共需要运行以下两个命令，一个用于本地，另一个用于全局安装 CLI。
npm i -D webpack-cli
npm i -g webpack-cli
它对我有用，我希望它也对你有用:)
【讨论】：
【参考方案7】：第一步：第一次运行
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;
第 3 步：现在转到您的 package.json 文件并在您的脚本选项中进行一些更改：
"scripts":
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
,
第四步：现在运行
npm start
在控制台中
【讨论】：
确实第一次安装对我来说是为了避免全局 webpack 版本（之前安装的）和新项目的本地版本之间的冲突。虽然我认为这些是“webpack”世界的一个限制，但很快就会用 docker 解决这个问题【参考方案8】：如果要使用webpack-dev-server，需要先安装webpack和webpack-cli。 webpack 是一个存储编译器的模块，webpack-cli 是运行它的命令行界面。否则，如果您更喜欢webpack-command，这是webpack-cli 的更轻量级版本，您可能需要安装webpack 和webpack-serve！
【讨论】：
【参考方案9】：我解决了这个问题。
npm i webpack-cli @webpack-cli/init
npx webpack-cli init
希望能帮到1
【讨论】：
以上是关于CLI 移动到一个单独的包中：webpack-cli的主要内容，如果未能解决你的问题，请参考以下文章