Webpack - webpack-dev-server: comando non trovato


97

Sto lavorando su una webapp React usando webpack, liberamente insieme a questo tutorial .

Per sbaglio, ho aggiunto la cartella node_modules al mio git. Quindi l'ho rimosso di nuovo usando git rm -f node_modules/*.

Ora, quando provo ad avviare il server webpack, ottengo il seguente errore:

> webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors

sh: webpack-dev-server: command not found

npm ERR! Darwin 14.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "devserve"
npm ERR! node v0.12.4
npm ERR! npm  v2.10.1
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! Blabber@0.0.1 devserve: `webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors`
npm ERR! spawn ENOENT

All'inizio pensavo fosse solo il mio progetto, ma poi ho controllato i checkpoint del codice del tutorial: stesso errore! Quindi qualcosa sembra essere incasinato a livello globale.

Ecco cosa ho provato finora:

  • rm node_modules e reinstallare con npm install
  • npm cache cleancome qualcuno ha menzionato riguardo a questo problema su GitHub
  • installa webpack a livello globale con npm install -g webpack
  • eliminare completamente node e npm dal mio sistema (utilizzando questa guida ) e reinstallare utilizzando brew

Il messaggio di errore persiste ancora. Cos'altro posso provare?

PS: Il contenuto di webpack.dev.config.jsè:

var config = require('./webpack.config.js');
var webpack = require('webpack');

config.plugins.push(
  new webpack.DefinePlugin({
    "process.env": {
      "NODE_ENV": JSON.stringify("development")
    }
  })
);

module.exports = config;

Fornisci il contenuto del file webpack.dev.config.js.
stdob--

Ricevo lo stesso errore e webpack-dev-server è sicuramente proprio lì nella cartella
Damon

Risposte:


164

Va bene, è stato facile:

npm install webpack-dev-server -g

Ciò che mi ha confuso che all'inizio non ne avevo bisogno, probabilmente le cose sono cambiate con una nuova versione.


30
Per qualche motivo non ha funzionato per me senza la -gbandiera. Quindi: npm i webpack-dev-server -grisolto il problema.
Martin Velchevski

2
Anch'io ho richiesto la bandiera -g
Alex Grande

5
Avevo anche bisogno di installare npm webpack -g perché inizialmente non era installato a livello globale
TJ Trapp

1
Era confuso perché nella pagina webpack non hanno l'opzione -g nel loro esempio. Se non vuoi installare globalmente, puoi creare uno script in package.json ed eseguirlo tramite npm run.
kingd9

provo a disinstallare questo pacchetto usando questo comando "npm uninstall webpack-dev-server -g --save" ma non è stato disinstallato, per favore fatemi sapere come disinstallare questo pacchetto.
Bhavin

32

Cordiali saluti, per accedere a qualsiasi script tramite riga di comando come stavi provando, devi avere lo script registrato come script di shell (o qualsiasi tipo di script come .js, .rb) nel sistema come questi file nella directory /usr/binin UNIX. E il sistema deve sapere dove trovarli. cioè la posizione deve essere caricata in $PATHarray.


Nel tuo caso, lo script webpack-dev-serverè già installato da qualche parte all'interno della ./node_modulesdirectory, ma il sistema non sa come accedervi. Quindi, per accedere al comando webpack-dev-server, è necessario installare anche lo script nell'ambito globale .

$ npm install webpack-dev-server -g

Qui, si -griferisce all'ambito globale.


Tuttavia, questo metodo non è consigliato perché potresti dover affrontare problemi di conflitto di versioni; così, invece è possibile impostare un comando in npm's package.jsonfile, come:

  "scripts": {
    "start": "webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors"
   }

Questa impostazione ti consentirà di accedere allo script che desideri con un semplice comando

$ npm start

Così breve da memorizzare e suonare. E npmconosce la posizione del modulo webpack-dev-server.


Ma quando corro node_modules/.bin/webpack-dev-server, perché dice che questo non è un comando non valido? Penso che correre node_modules/.bin/webpack-dev-serversia uguale a correrenpm run dev
Chor

14

Lo script webpack-dev-serverè già installato nella directory ./node_modules. Puoi installarlo di nuovo globalmente tramite

sudo npm install -g webpack-dev-server

o eseguilo in questo modo

./node_modules/webpack-dev-server/bin/webpack-dev-server.js -d --config webpack.dev.config.js --content-base public/ --progress --colors

. significa cercarlo nella directory corrente.


8

Filato

Ho avuto il problema durante l'esecuzione: yarn start

È stato risolto eseguendo prima: yarn install


1
Semplice ha yarn installfunzionato nel mio caso. Non sono sicuro di quale fosse il motivo.
Hinrich

1
o quello npm iche preferisci
Akin Hwan

5

Ho avuto lo stesso problema, ma i passaggi seguenti mi hanno aiutato a risolverlo.

  1. Installazione del 'webpack-dev-server' in locale (nella directory del progetto poiché non veniva prelevato dall'installazione globale)

    npm install --save webpack-dev-server

Può verificare se la cartella "webpack-dev-server" esiste all'interno di node_modules.

  1. In esecuzione utilizzando npx per l'esecuzione diretta

npx webpack-dev-server --mode development --config ./webpack.dev.js

npm run start funziona anche bene dove la tua voce negli script package.json dovrebbe essere come quella sopra come senza npx.


1

Ho scoperto che la risposta accettata non funziona in tutti gli scenari. Per assicurarsi che funzioni al 100%, è necessario anche cancellare la cache npm. O vai direttamente alla cache e cancella blocchi, cache, anonymous-cli-metrics.json; o si può provare npm cache clean.

Poiché l'autore aveva svuotato la cache prima di provare la soluzione consigliata, è possibile che non sia riuscito a renderlo parte dei prerequisiti.


1

Per l'installazione globale: npm install webpack-dev-server -g

Per l'installazione locale, installare npm --save-dev webpack

Quando fai riferimento al webpack nel file package.json, prova a cercarlo nella posizione node_modules \ .bin \

Dopo l'installazione locale, il file wbpack verrà creato nella posizione: \ node_modules \ .bin \ webpack


0

Ho installato con npm install --save-dev webpack-dev-serverpoi ho impostato package.json e webpack.config.js in questo modo: setting .

Quindi eseguo webpack-dev-server e ottengo questo errore di errore .

Se non lo uso npm install -g webpack-dev-serverper l'installazione, come risolverlo?

Ho corretto l'errore configuration has an unknown property 'colors'rimuovendo colors:true. Ha funzionato!


0

Ho avuto un problema simile con Yarn , nessuno dei precedenti ha funzionato per me, quindi ho semplicemente rimosso ./node_modulese eseguito yarn installe il problema è sparito.


0

npm installa webpack-dev-server -g - sistema operativo Windows

Meglio usare sudo in linux per evitare errori di autorizzazione

sudo npm installa webpack-dev-server -g

Puoi usare sudo npm install webpack-dev-server --save per aggiungerlo a package.json.

A volte potrebbe essere necessario eseguire i seguenti comandi.

npm installa webpack-cli --save o npm installa webpack-cli -g


Si prega di non consigliare l'utilizzo di sudo con npm.
richardsonwtr

Scopri perché qui
richardsonwtr

0

Ho notato lo stesso problema dopo aver installato VSCode e aggiunto un repository Git remoto. In qualche modo la /node_modules/.bincartella è stata eliminata e in esecuzione npm install --save webpack-dev-servernella riga di comando ha reinstallato la cartella mancante e ha risolto il mio problema.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.