wake-up-neo.com

Die CLI wurde in ein separates Paket verschoben: webpack-cli

Ich bin neu bei React.js und versuche, aus den Tutorials auf tutorialspoint zu lernen, aber ich hatte einen Fehler. Hier ist der Fehler in der Konsole, wenn ich den Befehl npm start ausführen:

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

Ich ging durch dasselbe Beispiel und sah mich dem gleichen Problem gegenüber. Nach den obigen Antworten habe ich zuerst diesen Befehl ausgeführt -

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

Nichts geschah und stand immer noch vor dem gleichen Problem.

Dann habe ich diesen Befehl ausgeführt -

npm install webpack-cli --save-dev

Das Problem wurde gelöst, aber es wurde ein weiterer Fehler angezeigt.

 enter image description here

In der neuen Webpack-Version stellt sich heraus, dass sie auch die Modulattribute geändert haben. Sie müssen also auch die Datei webpack.config.js ändern.

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

Grundsätzlich wird loaders durch rules innerhalb des module -Objekts ersetzt.

Ich habe diese Änderung vorgenommen und es hat für mich funktioniert.

 enter image description here

Hoffe, es hilft anderen Leuten, die dieses Tutorial befolgen.

Um das Invalid configuration object-Problem zu lösen, habe ich auf diese Antwort verwiesen . https://stackoverflow.com/a/42482079/5892553

16
Rito

In Webpack 3 befanden sich das Webpack selbst und die CLI dafür im selben Paket, aber in Version 4 wurden die beiden getrennt, um sie besser zu verwalten.

Um das Problem zu lösen, installieren Sie das Paket webpack-cli wie in dem Fehler vorgeschlagen, indem Sie npm install webpack-cli --save-dev in der Befehlszeile ausführen.

13
kingdaro

Hatte das gleiche Problem und kein Glück mit den oben genannten Lösungen - Ich habe versucht, webpack-cli global sowie lokal zu installieren, und das hat funktioniert.

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

Das hat es für mich behoben. Zumindest genug, um webpack --mode development. auszuführen

6
Ben Holmquist

Für Webpack 4 gelöst - Ich hoffe es funktioniert ab Webpack 2

Installieren Sie webpack-cli auch global mit diesem Befehl

npm i -g webpack-cli

Insgesamt müssen Sie also zwei Befehle ausführen, einen für local und einen für die globale CLI-Installation.

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

es funktioniert für mich, ich hoffe es funktioniert auch für dich :)

2
Sabir Hussain

Schritt 1: Erster Lauf

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

Schritt2: Lader werden durch Regeln ersetzt, also ändern Sie den Code in Ihrer webpack.config.j. Ändern Sie Ihre Datei 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;

Schritt 3: Gehen Sie nun zu Ihrer package.json-Datei und nehmen Sie einige Änderungen an Ihrer Skriptoption vor: 

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

Schritt4: Jetzt ausführen 

npm start

in der Konsole

0
sachin bhandari

Die Fehlerkonsole sagt Ihnen einfach, wie Sie das Problem beheben können. Scheint, als ob das Modul webpack vom Modul webpack-cli abhängt. Um das Problem zu beheben, führen Sie einfach den Befehl npm install webpack-cli --save aus. es würde einfach gut funktionieren.

0
Anadi Sharma

Sie müssen den Webpack-Server installieren, nicht Webpack-CLI. Schauen Sie sich den zweiten Punkt in diesem Blogbeitrag ..__ an. Versuchen Sie npm i -g [email protected].

0
Abel Condori Malmaceda

Wenn Sie webpack-dev-server verwenden möchten, müssen Sie zuerst webpack und webpack-cli installieren. webpack ist ein Modul, das den Compiler speichert, und webpack-cli ist die Befehlszeilenschnittstelle, um ihn auszuführen. Ansonsten, wenn Sie webpack-command bevorzugen, einer viel leichteren Version von webpack-cli, müssen Sie möglicherweise webpack und webpack-serve installieren!

0
Clite Tailor

Ich habe das Problem damit gelöst.

npm i webpack-cli @webpack-cli/init

npx webpack-cli init

Hoffnung zu helfen 1

0
user9668868