web-dev-qa-db-fra.com

La CLI est passée dans un paquet séparé: webpack-cli

Je suis nouveau sur React.js et j'essaie d'apprendre des tutoriels sur tutorialspoint mais j'ai rencontré une erreur. Voici l'erreur sur la console lorsque j'exécute la commande 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\_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>
javascriptphpnode.jsreactjswebpack
14
prakash kumar

Je suis passé par le même exemple et confronté le même problème. Donc, en suivant les réponses ci-dessus, j'ai d'abord lancé cette commande -

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

Rien ne s'est passé et était toujours confronté au même problème.

Puis j'ai lancé cette commande -

npm install webpack-cli --save-dev

Le problème était résolu, mais j'obtenais une autre erreur.

 enter image description here

Dans la nouvelle version de Webpack, ils ont également changé les attributs du module. Vous devez donc également modifier le fichier webpack.config.js.

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

Donc, fondamentalement, loaders est remplacé par rules à l'intérieur de l'objet module.

J'ai fait ce changement et cela a fonctionné pour moi.

 enter image description here

J'espère que cela aidera d'autres personnes qui suivent ce tutoriel.

Pour résoudre le problème Invalid configuration object, j’ai fait référence à cette réponse . https://stackoverflow.com/a/42482079/5892553

16
Rito

Dans WebPack 3, WebPP lui-même et l'interface de ligne de commande correspondante étaient auparavant dans le même package, mais dans la version 4, ils ont séparé les deux pour mieux les gérer.

Pour résoudre votre problème, installez le package webpack-cli comme le suggère l'erreur en exécutant npm install webpack-cli --save-dev sur la ligne de commande, comme vous le feriez avec tout autre package.

13
kingdaro

Avait le même problème, et pas de chance avec les solutions ci-dessus - j'ai essayé d'installer webpack-cli globalement et localement et cela a fonctionné.

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

Cela a résolu le problème pour moi. Au moins assez pour exécuter webpack --mode development.

6
Ben Holmquist

Résolu pour Webpack 4 - J'espère que cela fonctionnera à partir de Webpack 2

Installez également webpack-cli globalement en utilisant cette commande

npm i -g webpack-cli

Au total, vous devez donc exécuter les deux commandes suivantes, une pour l’installation locale et une autre pour l’installation globale de la CLI.

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

cela fonctionne pour moi j'espère que cela fonctionnera pour vous aussi :)

2
Sabir Hussain

Etape 1: Première course

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

Étape 2: Les chargeurs sont remplacés par des règles. Changez donc le code dans votre webpack.config.j. Changeons votre fichier 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;

Étape 3: Maintenant, allez dans votre fichier package.json et apportez quelques modifications à vos scripts: 

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

Step4: Now run 

npm start

en console

0
sachin bhandari

La console d’erreur vous indique simplement comment résoudre le problème. On dirait que le module webpack dépend du module webpack-cli. Pour résoudre le problème, exécutez simplement la commande npm install webpack-cli --save. cela fonctionnerait bien.

0
Anadi Sharma

Vous devez installer le serveur Webpack, et non pas Webpack-cli. Jetez un coup d’œil au deuxième point de cet article de blog . Essayez npm i -g [email protected].

0
Abel Condori Malmaceda

Si vous souhaitez utiliser webpack-dev-server, vous devez d'abord installer webpack et webpack-cli. webpack est un module qui stocke le compilateur et webpack-cli est une interface de ligne de commande permettant de l'exécuter. Sinon, si vous préférez webpack-command, une version beaucoup plus légère de webpack-cli, vous devrez peut-être installer webpack et webpack-serve!

0
Clite Tailor

J'ai résolu le problème avec ça.

npm i webpack-cli @webpack-cli/init

npx webpack-cli init

J'espère aider 1

0
user9668868