Webpack - webpack-dev-server: commande introuvable

Je travaille sur une webapp React en utilisant webpack, de manière lâche à côté de ce tutoriel .

Par accident, j'ai ajouté le dossier node_modules à mon git. Je l'ai ensuite retiré à nouveau en utilisant git rm -f node_modules/*.

Maintenant, lorsque j'essaye de démarrer le serveur Webpack, j'obtiens l'erreur suivante:

> 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

Au début, je pensais que c'était uniquement mon projet, mais j'ai ensuite vérifié les points de contrôle du code du tutoriel: même erreur! Donc, quelque chose semble foiré dans le monde.

Voici ce que j'ai essayé jusqu'à présent:

• rm node_modules et réinstaller avec npm install
• npm cache cleancomme quelqu'un l'a mentionné à propos de ce problème sur github
• installer webpack globalement avec npm install -g webpack
• supprimer complètement le nœud et npm de mon système (à l'aide de ce guide ) et réinstaller à l'aide de brew

Le message d'erreur persiste. Que puis-je essayer d'autre?

PS: Le contenu de webpack.dev.config.jsest:

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;

D'accord, c'était facile:

npm install webpack-dev-server -g

Ce qui m'a dérouté que je n'en avais pas besoin au début, c'est probablement que les choses ont changé avec une nouvelle version.

Pour info, pour accéder à n'importe quel script via la ligne de commande comme vous l'avez essayé, vous devez avoir le script enregistré en tant que script shell (ou tout type de script comme .js, .rb) dans le système comme ces fichiers dans le répertoire /usr/binsous UNIX. Et le système doit savoir où les trouver. c'est-à-dire que l'emplacement doit être chargé dans le $PATHtableau.

Dans votre cas, le script webpack-dev-serverest déjà installé quelque part dans le ./node_modulesrépertoire, mais le système ne sait pas comment y accéder. Ainsi, pour accéder à la commande webpack-dev-server, vous devez également installer le script dans une portée globale .

$ npm install webpack-dev-server -g

Ici, -gfait référence à la portée mondiale.

Cependant, cette méthode n'est pas recommandée car vous pourriez rencontrer des problèmes de conflit de version; donc, à la place, vous pouvez définir une commande dans npmle package.jsonfichier de comme:

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

Ce paramètre vous permettra d'accéder au script de votre choix avec une simple commande

$ npm start

Si court à mémoriser et à jouer. Et npmconnaît l'emplacement du module webpack-dev-server.

Le script webpack-dev-serverest déjà installé dans le répertoire ./node_modules. Vous pouvez soit l'installer à nouveau globalement en

sudo npm install -g webpack-dev-server

ou lancez-le comme ça

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

. signifie le regarder dans le répertoire courant.

Fil

J'ai eu le problème lors de l'exécution: yarn start

Il a été corrigé avec l'exécution en premier: yarn install

J'ai eu le même problème, mais les étapes ci-dessous m'ont aidé à m'en sortir.

1. Installation du 'webpack-dev-server' localement (dans le répertoire du projet car il ne faisait pas partie de l'installation globale)

   npm install --save webpack-dev-server

Peut vérifier si le dossier 'webpack-dev-server' existe dans node_modules.

2. Exécution en utilisant npx pour exécuter directement

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

npm run start fonctionne également très bien là où votre entrée dans les scripts package.json devrait être comme ci-dessus comme sans npx.

J'ai trouvé que la réponse acceptée ne fonctionne pas dans tous les scénarios. Pour s'assurer qu'il fonctionne à 100%, il faut ÉGALEMENT vider le cache npm. Soit directement accéder au cache et effacer les verrous, les caches, anonymous-cli-metrics.json; ou on peut essayer npm cache clean.

Étant donné que l'auteur avait vidé le cache avant d'essayer la solution recommandée, il est possible que cela ne fasse pas partie des prérequis.

Pour une installation globale: npm install webpack-dev-server -g

Pour une installation locale npm install --save-dev webpack

Lorsque vous faites référence à webpack dans le fichier package.json, il essaie de le rechercher à l'emplacement node_modules \ .bin \

Après l'installation locale, le fichier wbpack sera créé à l'emplacement: \ node_modules \ .bin \ webpack

npm install --save-dev webpack-dev-serverJ'installe avec puis je définis package.json et webpack.config.js comme ceci: setting .

Ensuite, j'exécute webpack-dev-server et j'obtiens cette erreur d' erreur .

Si je n'utilise pas npm install -g webpack-dev-serverpour installer, comment le réparer?

J'ai corrigé l'erreur configuration has an unknown property 'colors'en supprimant colors:true. Ça a marché!

J'ai eu un problème similaire avec Yarn , rien de ce qui précède n'a fonctionné pour moi, alors j'ai simplement retiré ./node_moduleset exécuté yarn installet le problème a disparu.

npm installer webpack-dev-server -g - système d'exploitation Windows

Mieux vaut utiliser sudo sous Linux pour éviter les erreurs d'autorisation

sudo npm installer webpack-dev-server -g

Vous pouvez utiliser sudo npm install webpack-dev-server --save pour l'ajouter à package.json.

Parfois, vous devrez peut-être exécuter les commandes ci-dessous.

npm installer webpack-cli --save ou npm installer webpack-cli -g

J'ai remarqué le même problème après l'installation de VSCode et l'ajout d'un référentiel Git distant. D'une manière ou d'une autre, le /node_modules/.bindossier a été supprimé et en cours d'exécution npm install --save webpack-dev-serverdans la ligne de commande, a réinstallé le dossier manquant et résolu mon problème.