webpack não é reconhecido como um comando interno ou externo, programa operável ou arquivo em lote

125

Estou aprendendo React.js e estou usando o Windows 8 OS.i navegue para a minha pasta raiz

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 não é reconhecido como um comando interno ou externo, programa operável ou arquivo em lote

yasar
fonte
Eu tive esse problema, mas depois de reiniciar o problema do IDE (PHPStorm no meu caso) foi resolvido
Arthur Tsidkilov

Respostas:

81

Eu tive esse problema por um longo tempo também. (webpack instalado globalmente etc., mas ainda não reconhecido). Acabei não especificando variável de ambiente para npm (onde está o arquivo webpack.cmd)? Então, adiciono à minha variável Path

%USERPROFILE%\AppData\Roaming\npm\

Se você estiver usando o Powershell, poderá digitar o seguinte comando para adicionar efetivamente ao seu caminho:

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

IMPORTANTE: Não esqueça de fechar e reabrir a janela do PowerShell para aplicar isso.

Espero que ajude.

Vlado
fonte
6
bem, eu estou preso no mesmo lugar ... Você pode por favor elaborar sua resposta
Intruder
2
Eu estava seguindo todas as etapas, mas não funcionou; finalmente, percebi que não abri o CMD como administrador.
Hosein Djadidi
1
Melhor definido como% APPDATA% \ npm
Nikolay Petyukh 01/03/19
156

A melhor solução para esse problema é instalar Webpackglobalmente.

Isso sempre funciona e funcionou para mim. Tente abaixo do comando.

npm install -g webpack
srikanth_k
fonte
36
Eu acho que deve ser observado que o uso do -g instala o webpack globalmente, o que você pode não querer se tiver vários projetos que exijam versões diferentes do webpack.
Uber Schnoz
92

Como alternativa, se você tiver o Webpack instalado localmente, poderá especificar explicitamente onde o prompt de comando deve procurar, da seguinte forma:

node_modules\.bin\webpack

(Isso pressupõe que você esteja dentro do diretório com o seu package.jsone que já tenha executado npm install webpack.)

Restabelecer CMs BalinKingOfMoria
fonte
4
Concordo com o Max, o motivo é que é recomendável ter o webpack instalado localmente (em devDependencies) - Meu problema era um pouco diferente, ao adicionar o webpack como uma etapa de pré-compilação no VS 2017, achei que o VS era inteligente o suficiente para encontrar o cmd do webpack localmente sem o caminho completo #
JimiSweden
@JimiSweden fez você tente adicionar node_modules\.bina tools-> configure ferramentas externas
Max Favilli
4
Você pode tentar usar o npx webpackque também verifica, em ./node_modules/.binvez de mexer nos caminhos.
Manfred
46

npm install -g webpack-dev-server resolverá seu problema

Araali Farooq
fonte
2
Pode resolver a mensagem de erro OP postada, mas essa não é uma boa solução para o problema, pois adiciona mais dependências do que apenas resolver o webpack ausente. Veja qualquer uma das outras respostas com mais votos para melhores alternativas.
angularsen 4/01/19
2
Como já foi indicado por diferentes colaboradores (consulte outras respostas / comentários), a instalação global é considerada uma prática recomendada, uma vez que o bloqueia em uma versão. Veja também webpack.js.org/guides/installation
Manfred
16

Tente excluir node_modules no diretório local e execute novamente a instalação do npm .

Dushyant Singh
fonte
1
Graças isso realmente fez isso por mim, tentei as outras respostas e fiquei aqui zangado com o mundo por mais de uma hora
Clint
12

Inclua o comando webpack como um script npm no seu package.json.

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

Então corra

npm run compile

Quando o webpack é instalado, ele cria um binário na pasta ./node_modules/.bin. Os scripts npm também procuram pelo executável criado nesta pasta

Nikhil Ranjan
fonte
não funciona - NPM instalar -g Webpack-dev-servidor é comando correto
TarmoPikaro
11

O Webpack CLI agora está em um pacote separado e deve ser instalado globalmente para usar o comando 'webpack':

npm install -g webpack-cli

EDIT: Muita coisa mudou. O pessoal do Webpack não recomenda instalar a CLI globalmente (ou separadamente). Esse problema deve ser corrigido agora, mas o comando de instalação adequado é:

npm install --save-dev webpack

Essa resposta foi originalmente planejada como uma "solução alternativa" para o problema dos POs.

averroes
fonte
1
"deve ser instalado globalmente" não está correto como eu o entendo. Até o pessoal do webpack desaconselha. Veja webpack.js.org/guides/installation
Manfred
4

você precisa instalar o webpack e o webpack-cli no mesmo escopo.

npm i -g webpack webpack-cli

ou,

npm i webpack webpack-cli

se você instalá-lo localmente, precisará chamá-lo especificamente

node_modules/.bin/webpack -v
Irteza Asad
fonte
Ou, se instalado localmente, você poderia usar npx webpack(testado com a versão 6.5.0 npm, Webpack 4.28.4 e Webpack-cli 3.2.1)
Manfred
esse é o bilhete
Cekaleek 17/05/19
npm i -g webpack webpack-cli
VnDevil
4

Também tivemos esse problema e eu gosto de todas as respostas que sugerem o uso de um script definido em package.json.

Para nossas soluções, geralmente usamos a seguinte sequência:

  1. npm install --save-dev webpack-cli(se você estiver usando o webpack v4 ou posterior, caso contrário npm install --save-dev webpack, use , consulte a instalação do webpack , recuperada em 19 de janeiro de 2019)
  2. npx webpack

O passo 1 é único. O passo 2 também verifica ./node_modules/.bin. Você também pode adicionar a segunda etapa como um script npm package.json, por exemplo:

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

e use npm run buildpara executar este script.

Testou esta solução com o npm versão 6.5.0, webpack versão 4.28.4 e webpack-cli versão 3.2.1 no Windows 10, executando todos os comandos dentro de uma janela do PowerShell. Minha versão do nodejs é / era 10.14.2. Eu também testei isso no Ubuntu Linux versão 18.04.

Aconselho não instalar o webpack globalmente, principalmente se você estiver trabalhando com vários projetos diferentes, cada um dos quais pode exigir uma versão diferente do webpack. Instalar o webpack globalmente o reduz a uma versão específica em todos os projetos na mesma máquina.

Manfred
fonte
4

Talvez uma instalação limpa resolva o problema. Este "comando" remove todos os módulos anteriores e os reinstala, talvez enquanto o módulo webpack é baixado e instalado incompletamente.

npm clean-install
muhamad zolfaghari
fonte
3

Eu tive o mesmo problema e acabei de adicionar o bloco de código ao meu arquivo package.json;

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

e então execute o comando no terminal;

npm run build
B.Brave
fonte
3

Instale o WebPack globalmente

npm install --global webpack
Alper Ebicoglu
fonte
2

Basta executar sua linha de comando (cmd) como administrador.

ZOALIT
fonte
2

Se você acabou de clonar um repositório, primeiro precisa executar

npm install

O erro que você recebe será gerado se você estiver perdendo dependências do projeto. O comando acima fará o download e instalará.

PrestonDocks
fonte
2
npx webpack

É trabalhado para mim. Estou usando o Windows 10 e instalei o webpack localmente.

aystiro
fonte
2

Eu tive esse problema ao atualizar para o React 16.12.0 .

Eu tive dois erros, um referente ao webpack e outro referente à loja ao renderizar o DOM.

Erro no Webpack:

webpack não é reconhecido como um comando interno ou externo, programa operável ou arquivo em lote

Solução Webpack:

  1. Fechar solução VS relacionada
  2. Excluir node_modulespasta
  3. Excluído package-lock.json
  4. npm install
  5. npm rebuild
  6. Repetido isso 2-3 vezes

Erro de armazenamento:

O tipo Store <()> não pode ser atribuído ao tipo Store <any, AnyAction>

Solução da loja:

As sugestões para atualizar minha versão do React não corrigiram esse erro para mim, mas independentemente eu recomendaria fazê-lo.

Meu código acabou assim:

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

De acordo com esta solução

EGC
fonte
1

Eu recebi o mesmo erro, nenhuma das soluções funcionou para mim, reinstalei o nó e isso reparou meu ambiente, tudo funciona novamente.

Simon Xiao
fonte
Isto é o que eu tinha que fazer também. Tentei pelo menos três outras "soluções" fornecidas aqui e nenhuma funcionou, exceto para desinstalar e reinstalar o Node novamente.
Quiver
1

Para mim, ele trabalhou para instalar o webpack separadamente. Então simplesmente:

$npm install
$npm install webpack

Não sei por que isso deve ser necessário, mas funcionou.

Katinka Hesselink
fonte
1

Esses comandos abaixo fornecidos funcionaram para mim.

npm cache clean --force
npm install -g webpack

Nota - Execute estes comandos como administrador. Depois de instalado, feche o prompt de comando e reinicie-o para ver as alterações aplicadas.

Nand Kishor
fonte
1

Se você criar uma pasta padrão para seus projetos JS, para poder usar os Módulos JS, webpacke Babelsão ótimas ferramentas.

Não instale webpackglobalmente e depois de instalar as versões mais recentes de ambos, seu package.jsonarquivo será carregado e pronto para copiar para projetos futuros.

Certifique-se de excluir a node_modulespasta para diminuir o tamanho do arquivo na pasta padrão e, em seguida, reinstalar o uso de node_modules npm install.

Esqueci-me de executar o npm install e continuei recebendo esse erro ao tentar executar o meu webpack dev-server até perceber que precisava executar npm installpara instalar node_modulese funcionou.

Jason Bar
fonte
Excluir node_modules + npm install levou-me novamente. Obrigado!
Brandon Barkley
0

A correção para mim foi instalar localmente o webpack como devDependency. Embora eu tenha como devDependenciesele não foi instalado na pasta node_modules. Então eu corri npm install --only=dev

Gaivota
fonte
-1

Às vezes, o npm install -g webpack não salva corretamente. Melhor usar o npm install webpack --save . Funcionou para mim.

Amartya Banerjee
fonte
1
-g instala globalmente (não o seu projeto local node_modules + package.json) enquanto --save instala localmente (no seu node_modules + package.json local), portanto, esta resposta está incorreta.
George
-1

Eu tive esse mesmo problema e não consegui descobrir. Passei por todas as linhas de código e não consegui encontrar meu erro. Então percebi que instalei o webpack na pasta errada. Meu erro não foi prestar atenção na pasta na qual estava instalando o webpack.

Michael Neely
fonte