CLI переместился в отдельный пакет: webpack-cli
Я новичок в React.js, и я пытаюсь учиться на уроках по учебнику, но я столкнулся с ошибкой. Вот ошибка на консоли, когда я запускаю команду запуска npm:
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\_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>
Ответы
Ответ 1
Я прошел один и тот же пример и столкнулся с той же проблемой. Поэтому, следуя приведенным выше ответам, я сначала выполнил эту команду -
npm install -g webpack-cli --save-dev
Ничего не произошло и по-прежнему сталкивается с одной и той же проблемой.
Затем я выполнил эту команду -
npm install webpack-cli --save-dev
Проблема была решена, но я получил еще одну ошибку.
![enter image description here]()
Оказывается, в новой версии Webpack они также изменили атрибуты модуля. Поэтому вам также нужно внести изменения в файл webpack.config.js.
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
Ответ 2
В webpack 3 сам webpack и CLI для него были в одном пакете, но в версии 4 они разделили эти два, чтобы лучше управлять каждым из них.
Чтобы решить вашу проблему, установите пакет webpack-cli, как показывает ошибка, запустив npm install webpack-cli --save-dev в командной строке, как и любой другой пакет.
Ответ 3
Имел такую же проблему, и не повезло с вышеупомянутыми решениями - я попытался установить webpack-cli как на глобальном уровне, так и на местном уровне, и это сработало.
npm install -g webpack-cli --save-dev
Это исправило это для меня. По крайней мере, достаточно для разработки webpack --mode development.
Ответ 4
Решено для Webpack 4 - Я надеюсь, что он работает для webpack 2 onwards
Установите webpack-cli глобально, используя эту команду
npm i -g webpack-cli
Таким образом, в общей сложности вам нужно запустить две следующие команды: одну для локальной и другой для установки CLI на глобальном уровне соответственно.
npm i -D webpack-cli
npm i -g webpack-cli
это работает для меня, я надеюсь, что это сработает и для вас :)
Ответ 5
Консоль ошибок просто сообщает вам, как решить проблему. Похоже, что модуль webpack зависит от webpack-cli. Чтобы устранить проблему, просто запустите команду npm install webpack-cli --save. это будет нормально работать.
Ответ 6
Вам нужно установить сервер webpack, а не webpack-cli. Взгляните на второй пункт в этом сообщении в блоге. Попробуйте npm я -g [email protected].
Ответ 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;
Шаг 3. Теперь перейдите в файл package.json и внесите некоторые изменения в свой сценарий:
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
Шаг4: Теперь запустите
npm start
в консоли
Ответ 8
Если вы хотите использовать webpack-dev-server, вам webpack нужно установить webpack и webpack-cli. webpack - это модуль, который хранит компилятор, а webpack-cli это командный интерфейс для его запуска. В противном случае, если вы предпочитаете webpack-command, гораздо более легкую версию webpack-cli, вам может потребоваться установить webpack и webpack-serve !
