Webpack - webpack-dev-server: comando não encontrado


97

Estou trabalhando em um webapp React usando webpack, vagamente ao lado deste tutorial .

Acidentalmente, adicionei a pasta node_modules ao meu git. Em seguida, removi novamente usando git rm -f node_modules/*.

Agora, quando tento iniciar o servidor webpack, recebo o seguinte erro:

> 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

A princípio pensei que era apenas meu projeto, mas depois verifiquei os pontos de verificação do código do tutorial: mesmo erro! Portanto, algo parece estar confuso globalmente.

Aqui está o que tentei até agora:

  • rm node_modules e reinstalar com npm install
  • npm cache cleancomo alguém mencionou em relação a este problema no github
  • instale o webpack globalmente com npm install -g webpack
  • exclua completamente o nó e o npm do meu sistema (usando este guia ) e reinstale usando o brew

A mensagem de erro ainda persiste. O que mais posso tentar?

PS: O conteúdo de 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;

Forneça o conteúdo do arquivo webpack.dev.config.js.
stdob--

Estou recebendo o mesmo erro e o webpack-dev-server está definitivamente bem ali na pasta
Damon

Respostas:


164

Ok, foi fácil:

npm install webpack-dev-server -g

O que me confundiu eu não precisar disso no início, provavelmente as coisas mudaram com uma nova versão.


30
Por algum motivo, não funcionou para mim sem a -gbandeira. Então: npm i webpack-dev-server -gresolveu o problema.
Martin Velchevski

2
Eu também solicitei a bandeira -g
Alex Grande

5
Eu também precisei instalar o npm webpack -g porque ele não foi instalado globalmente no início
TJ Trapp

1
Foi confuso porque na página do webpack não existe a opção -g no exemplo. Se você não deseja instalar globalmente, pode criar um script no package.json e executá-lo por meio do npm run.
kingd9

Eu tento desinstalar este pacote usando este comando "npm uninstall webpack-dev-server -g --save" mas não desinstalei, por favor, deixe-me saber como desinstalar este pacote.
Bhavin

32

Para sua informação, para acessar qualquer script via linha de comando como você estava tentando, você precisa ter o script registrado como um shell-script (ou qualquer tipo de script como .js, .rb) no sistema como esses arquivos no diretório /usr/binno UNIX. E o sistema deve saber onde encontrá-los. ou seja, o local deve ser carregado na $PATHmatriz.


No seu caso, o script webpack-dev-serverjá está instalado em algum lugar dentro do ./node_modulesdiretório, mas o sistema não sabe como acessá-lo. Portanto, para acessar o comando webpack-dev-server, é necessário instalar o script em escopo global também.

$ npm install webpack-dev-server -g

Aqui, -grefere-se ao escopo global.


No entanto, essa forma não é recomendada porque você pode enfrentar problemas de conflito de versão; por isso, em vez disso você pode definir um comando em npm's package.jsonarquivo como:

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

Esta configuração permitirá que você acesse o script que deseja com um comando simples

$ npm start

Tão curto para memorizar e jogar. E npmsabe a localização do módulo webpack-dev-server.


Mas quando eu corro node_modules/.bin/webpack-dev-server, por que diz que este é um comando inválido? Acho que correr node_modules/.bin/webpack-dev-serveré igual a corrernpm run dev
Chor

14

O script webpack-dev-serverjá está instalado no diretório ./node_modules. Você pode instalá-lo novamente globalmente por

sudo npm install -g webpack-dev-server

ou correr assim

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

. significa procurar no diretório atual.


8

Fio

Tive o problema ao executar: yarn start

Foi corrigido executando primeiro: yarn install


1
Simples yarn installfuncionou no meu caso. Não tenho certeza de qual foi o motivo.
Hinrich,

1
ou o npm ique você preferir
Akin Hwan

5

Eu tive o mesmo problema, mas as etapas abaixo me ajudaram a sair dele.

  1. Instalando o 'webpack-dev-server' localmente (no diretório do projeto, pois não foi selecionado na instalação global)

    npm install --save webpack-dev-server

Pode verificar se a pasta 'webpack-dev-server' existe dentro de node_modules.

  1. Executando usando npx para executar diretamente

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

npm run start também funciona bem onde sua entrada em scripts package.json deve ser como o acima, sem npx.


1

Descobri que a resposta aceita não funciona em todos os cenários. Para garantir que 100% funcione, também é necessário limpar o cache npm. Vá diretamente para o cache e limpe os bloqueios, caches, anonymous-cli-metrics.json; ou pode-se tentar npm cache clean.

Como o autor limpou o cache antes de tentar a solução recomendada, é possível que não tenha feito parte dos pré-requisitos.


1

Para instalação global: npm install webpack-dev-server -g

Para instalação local npm install --save-dev webpack

Quando você se refere ao webpack no arquivo package.json, ele tenta procurá-lo no local node_modules \ .bin \

Após a instalação local, o arquivo wbpack será criado no local: \ node_modules \ .bin \ webpack


0

Eu instalo com npm install --save-dev webpack-dev-serverentão defino package.json e webpack.config.js assim: configuração .

Então eu executo webpack-dev-server e recebo este erro de erro .

Se eu não costumo npm install -g webpack-dev-serverinstalar, como consertar?

Corrigi o erro configuration has an unknown property 'colors'removendo colors:true. Funcionou!


0

Tive um problema semelhante com o Yarn , nenhum dos anteriores funcionou para mim, então simplesmente removi ./node_modulese corri yarn installe o problema foi embora.


0

npm install webpack-dev-server -g - sistema operacional Windows

Melhor você usar o sudo no linux para evitar erros de permissão

sudo npm install webpack-dev-server -g

Você pode usar sudo npm install webpack-dev-server --save para adicioná-lo ao package.json.

Às vezes, pode ser necessário executar os comandos abaixo.

npm install webpack-cli --save ou npm install webpack-cli -g


Não aconselhe o uso de sudo com npm.
richardsonwtr

Veja por que aqui
richardsonwtr

0

Percebi o mesmo problema depois de instalar o VSCode e adicionar um repositório Git remoto. De alguma forma, a /node_modules/.binpasta foi excluída e rodando npm install --save webpack-dev-serverna linha de comando, reinstalou a pasta ausente e corrigiu meu problema.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.