Webpack wird nicht als interner oder externer Befehl, bedienbares Programm oder Batchdatei erkannt

125

Ich lerne React.js und verwende Windows 8 OS. Ich habe zu meinem Stammordner navigiert

1.Created the package.json file by npm init
2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder
3. install webpack globally by typing npm install webpack -g
4. i am also having a webpack.config.js in my root folder which contains the source and ouput directory
5. when i type the webpack command i am getting the below error.

Webpack wird nicht als interner oder externer Befehl, bedienbares Programm oder Batchdatei erkannt

Yasar
quelle
Ich hatte dieses Problem, aber nach dem Neustart der IDE (in meinem Fall PHPStorm) wurde das Problem behoben
Arthur Tsidkilov

Antworten:

81

Ich hatte dieses Problem auch schon lange. (Webpack global installiert usw., aber immer noch nicht erkannt) Es stellte sich heraus, dass ich keine Umgebungsvariable für npm angegeben habe (wo sich die Datei webpack.cmd befindet). Also füge ich meiner Pfadvariablen hinzu

%USERPROFILE%\AppData\Roaming\npm\

Wenn Sie Powershell verwenden, können Sie den folgenden Befehl eingeben, um Ihren Pfad effektiv zu ergänzen:

[Environment]::SetEnvironmentVariable("Path", "$env:Path;%USERPROFILE%\AppData\Roaming\npm\", "User")

WICHTIG: Vergessen Sie nicht, Ihr Powershell-Fenster zu schließen und erneut zu öffnen, um dies anzuwenden.

Ich hoffe es hilft.

Vlado
quelle
6
Nun, ich stecke am selben Ort fest ... Kannst du bitte deine Antwort ausarbeiten
Eindringling
2
Ich habe alle Schritte befolgt, aber es hat nicht funktioniert. Schließlich wurde mir klar, dass ich CMD nicht als Administrator geöffnet habe.
Hosein Djadidi
1
Besser auf% APPDATA% \ npm setzen
Nikolay Petyukh
156

Eine bessere Lösung für dieses Problem ist die Webpackglobale Installation .

Das funktioniert immer und es hat bei mir funktioniert. Versuchen Sie es mit dem folgenden Befehl.

npm install -g webpack
srikanth_k
quelle
36
Ich denke, es sollte beachtet werden, dass die Verwendung von -g das Webpack global installiert, was Sie möglicherweise nicht möchten, wenn Sie mehrere Projekte haben, für die möglicherweise unterschiedliche Versionen des Webpacks erforderlich sind.
Uber Schnoz
92

Wenn Sie Webpack lokal installiert haben, können Sie alternativ explizit angeben, wo die Eingabeaufforderung suchen soll, um es zu finden:

node_modules\.bin\webpack

(Dies setzt voraus, dass Sie sich mit Ihrem im Verzeichnis befinden package.jsonund bereits ausgeführt wurden npm install webpack.)

BalinKingOfMoria CMs wiederherstellen
quelle
4
Stimmen Sie mit Max überein. Der Grund dafür ist, dass empfohlen wird, das Webpack lokal zu installieren (in devDependencies). Mein Problem war jedoch etwas anders. Als ich das Webpack als Vorbereitungsschritt in VS 2017 hinzufügte, fand ich VS intelligent genug, um das zu finden Webpack cmd lokal ohne den vollständigen Pfad
JimiSweden
@ JimiSweden haben Sie versucht node_modules\.bin, Tools
Max Favilli
4
Sie könnten versuchen, npx webpackdie auch zu überprüfen, ./node_modules/.binanstatt mit Pfaden zu fummeln.
Manfred
46

npm install -g webpack-dev-server wird Ihr Problem lösen

Araali Farooq
quelle
2
Es kann die Fehlermeldung OP beheben, die veröffentlicht wurde, aber dies ist keine gute Lösung für das Problem, da es mehr Abhängigkeiten hinzufügt als nur das fehlende Webpack zu lösen. Weitere Alternativen finden Sie in den anderen Antworten mit hoher Abstimmung.
Angularsen
2
Wie bereits von verschiedenen Mitwirkenden hervorgehoben (siehe andere Antworten / Kommentare), wird die globale Installation als schlechte Praxis angesehen, da Sie auf eine Version beschränkt sind. Siehe auch webpack.js.org/guides/installation
Manfred
16

Versuchen Sie, node_modules im lokalen Verzeichnis zu löschen, und führen Sie npm install erneut aus .

Dushyant Singh
quelle
1
Danke, das hat es tatsächlich für mich getan, die anderen Antworten ausprobiert und war über eine Stunde lang hier verrückt nach der Welt
Clint
12

Fügen Sie den Befehl webpack als npm-Skript in Ihre package.json ein.

{
    "name": "react-app",
    "version": "1.0.0",
    "scripts": {
      "compile": "webpack --config webpack.config.js"
    }
}

Dann renne

npm run compile

Wenn das Webpack installiert ist, wird eine Binärdatei im Ordner ./node_modules/.bin erstellt. npm-Skripte suchen auch nach ausführbaren Dateien, die in diesem Ordner erstellt wurden

Nikhil Ranjan
quelle
funktioniert nicht - npm install -g webpack-dev-server ist korrekter Befehl
TarmoPikaro
11

Die Webpack-CLI befindet sich jetzt in einem separaten Paket und muss global installiert werden, um den Befehl 'webpack' verwenden zu können:

npm install -g webpack-cli

EDIT: Viel hat sich geändert. Webpack-Leute empfehlen nicht, die CLI global (oder separat) zu installieren. Dieses Problem sollte jetzt behoben sein, aber der richtige Installationsbefehl lautet:

npm install --save-dev webpack

Diese Antwort war ursprünglich als "Workaround" für das OP-Problem gedacht.

Averroes
quelle
1
"muss global installiert werden" ist meines Wissens nicht korrekt. Sogar die Webpack-Leute raten davon ab. Siehe webpack.js.org/guides/installation
Manfred
4

Sie müssen webpack und webpack-cli im selben Bereich installieren.

npm i -g webpack webpack-cli

oder,

npm i webpack webpack-cli

Wenn Sie es lokal installieren, müssen Sie es speziell aufrufen

node_modules/.bin/webpack -v
Irteza Asad
quelle
Oder, wenn lokal installiert, können Sie verwenden npx webpack(getestet mit npm Version 6.5.0, Webpack 4.28.4 und Webpack-Cli 3.2.1)
Manfred
das ist das Ticket
Cekaleek
npm i-g Webpack Webpack-Cli
VnDevil
4

Wir haben dieses Problem auch erlebt und ich mag alle Antworten, die die Verwendung eines in definierten Skripts vorschlagen package.json.

Für unsere Lösungen verwenden wir häufig die folgende Reihenfolge:

  1. npm install --save-dev webpack-cli(Wenn Sie Webpack v4 oder höher verwenden, verwenden Sie es andernfalls npm install --save-dev webpack, siehe Webpack-Installation , abgerufen am 19. Januar 2019)
  2. npx webpack

Schritt 1 ist einmalig. Schritt 2 prüft auch ./node_modules/.bin. Sie können den zweiten Schritt auch als npm-Skript hinzufügen package.json, zum Beispiel:

{
   ...
   "scripts": {
      ...
      "build": "npx webpack --mode development",
      ...
   },
   ...
}

und dann verwenden npm run build, um dieses Skript auszuführen.

Testete diese Lösung mit npm Version 6.5.0, Webpack Version 4.28.4 und Webpack-Cli Version 3.2.1 unter Windows 10 und führte alle Befehle in einem PowerShell-Fenster aus. Meine nodejs Version ist / war 10.14.2. Ich habe dies auch unter Ubuntu Linux Version 18.04 getestet.

Ich würde davon abraten, Webpack global zu installieren, insbesondere wenn Sie mit vielen verschiedenen Projekten arbeiten, für die möglicherweise jeweils eine andere Version von Webpack erforderlich ist. Durch die globale Installation von Webpack werden Sie für alle Projekte auf demselben Computer an eine bestimmte Version gebunden.

Manfred
quelle
4

Möglicherweise wird das Problem durch eine Neuinstallation behoben. Dieser "Befehl" entfernt alle vorherigen Module und installiert sie erneut, möglicherweise während das Webpack-Modul unvollständig heruntergeladen und installiert ist.

npm clean-install
Muhamad Zolfaghari
quelle
3

Ich hatte das gleiche Problem und habe gerade den Codeblock in meine package.json-Datei eingefügt.

 "scripts": {
   "build": "webpack -d --progress --colors"
 }

und führen Sie dann den Befehl auf dem Terminal aus.

npm run build
B. Brave
quelle
3

Installieren Sie WebPack global

npm install --global webpack
Alper Ebicoglu
quelle
2

Führen Sie einfach Ihre Befehlszeile (cmd) als Administrator aus.

ZOALIT
quelle
2

Wenn Sie gerade ein Repo geklont haben, müssen Sie zuerst ausführen

npm install

Der Fehler, den Sie erhalten, wird generiert, wenn Sie Projektabhängigkeiten vermissen. Mit dem obigen Befehl werden sie heruntergeladen und installiert.

PrestonDocks
quelle
2
npx webpack

Es ist für mich gearbeitet. Ich verwende Windows 10 und habe das Webpack lokal installiert.

Aystiro
quelle
2

Ich hatte dieses Problem beim Upgrade auf React 16.12.0 .

Ich hatte zwei Fehler, einen in Bezug auf das Webpack und den anderen in Bezug auf den Speicher beim Rendern des DOM.

Webpack-Fehler:

Webpack wird nicht als interner oder externer Befehl, bedienbares Programm oder Batchdatei erkannt

Webpack-Lösung:

  1. Schließen Sie verwandte VS-Lösung
  2. node_modulesOrdner löschen
  3. Gelöscht package-lock.json
  4. npm install
  5. npm rebuild
  6. Wiederholt dies 2-3 mal

Speicherfehler:

Der Typ Store <()> kann nicht dem Typ Store <any, AnyAction> zugewiesen werden

Lösung speichern:

Vorschläge zum Aktualisieren meiner React-Version haben diesen Fehler nicht für mich behoben, aber unabhängig davon würde ich empfehlen, dies zu tun.

Mein Code sah am Ende so aus:

ReactDOM.render(
        <Provider store={store as any}>
            <ConnectedApp />
        </Provider>,
        document.getElementById('app')
    );

Gemäß dieser Lösung

EGC
quelle
1

Ich habe den gleichen Fehler erhalten, keine der Lösungen hat für mich funktioniert, ich habe den Knoten neu installiert und das hat meine Umgebung repariert, alles funktioniert wieder.

Simon Xiao
quelle
Das musste ich auch tun. Ich habe mindestens drei andere "Lösungen" ausprobiert, die hier bereitgestellt wurden, und keine funktionierte außer der Deinstallation und erneuten Installation von Node.
Köcher
1

Bei mir hat es funktioniert, das Webpack separat zu installieren. Also einfach:

$npm install
$npm install webpack

Ich bin mir nicht sicher, warum dies notwendig sein sollte, aber es hat funktioniert.

Katinka Hesselink
quelle
1

Diese unten angegebenen Befehle haben bei mir funktioniert.

npm cache clean --force
npm install -g webpack

Hinweis - Führen Sie diese Befehle als Administrator aus. Schließen Sie nach der Installation die Eingabeaufforderung und starten Sie sie neu, um die angewendeten Änderungen anzuzeigen.

Nand Kishor
quelle
1

Wenn Sie einen Boilerplate-Ordner für Ihre JS-Projekte erstellen, damit Sie JS-Module verwenden können webpackund Babelgroßartige Tools sind.

Nicht webpackglobal installieren und nach der Installation der neuesten Versionen von beiden wird Ihre package.jsonDatei geladen und kann für zukünftige Projekte kopiert werden.

node_modulesStellen Sie sicher, dass Sie den Ordner löschen , um die Dateigröße in Ihrem Boilerplate-Ordner zu verringern, und anschließend node_modules use neu installieren npm install.

Ich habe vergessen, npm install auszuführen, und habe beim Versuch, meinen Webpack-Dev-Server auszuführen, immer wieder diesen Fehler erhalten, bis mir klar wurde, dass ich npm installzur Installation ausgeführt werden musste, node_modulesund dann hat es funktioniert.

Jason Bar
quelle
Das Löschen von node_modules + npm install hat mich wieder in Schwung gebracht. Vielen Dank!
Brandon Barkley
0

Das Update für mich war die lokale Installation von Webpack als devDependency. Obwohl ich es habe, da devDependencieses nicht im Ordner node_modules installiert wurde. Also rannte ich npm install --only=dev

Möwe
quelle
-1

Manchmal speichert npm install -g webpack nicht richtig. Verwenden Sie besser npm install webpack --save . Es hat bei mir funktioniert.

Amartya Banerjee
quelle
1
-g wird global installiert (nicht Ihr lokales Projekt node_modules + package.json), während --save lokal installiert wird (in Ihren lokalen node_modules + package.json), sodass diese Antwort falsch ist.
George
-1

Ich hatte das gleiche Problem und konnte es nicht herausfinden. Ich habe jede Codezeile durchgesehen und konnte meinen Fehler nicht finden. Dann wurde mir klar, dass ich das Webpack im falschen Ordner installiert hatte. Mein Fehler war, dass ich nicht auf den Ordner geachtet habe, in dem ich das Webpack installiert habe.

Michael Neely
quelle