Webpack-webpack-dev-server : 명령을 찾을 수 없습니다.


97

이 튜토리얼 과 함께 webpack을 사용하여 React webapp에서 작업하고 있습니다 .

실수로 내 자식에 node_modules 폴더를 추가했습니다. 그런 다음을 사용하여 다시 제거했습니다 git rm -f node_modules/*.

이제 웹팩 서버를 시작하려고하면 다음 오류가 발생합니다.

> 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

처음에는 내 프로젝트 일 뿐이라고 생각했지만 튜토리얼의 코드 체크 포인트를 확인했습니다. 같은 오류입니다! 그래서 무언가가 전 세계적으로 엉망인 것 같습니다.

지금까지 시도한 내용은 다음과 같습니다.

  • rm node_modules 및 다시 설치 npm install
  • npm cache clean누군가 가 github 에서이 문제에 대해 언급했듯이
  • 전역 적으로 웹팩 설치 npm install -g webpack
  • 내 시스템에서 노드와 npm을 완전히 삭제하고 ( 이 가이드 사용) brew를 사용하여 다시 설치

오류 메시지가 계속 표시됩니다. 또 무엇을 시도 할 수 있습니까?

추신 : 내용 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;

파일의 내용을 입력하십시오 webpack.dev.config.js.
stdob--

같은 오류가 발생하고 webpack-dev-server는 확실히 폴더에 있습니다
Damon

답변:


164

좋습니다. 쉬웠습니다.

npm install webpack-dev-server -g

처음에는 필요하지 않았다는 점을 혼란스럽게했으며 아마도 새 버전으로 인해 상황이 변경되었을 것입니다.


30
어떤 이유로 -g깃발 없이는 작동하지 않았습니다 . 그래서 : npm i webpack-dev-server -g문제를 해결했습니다.
Martin Velchevski

2
나도 -g 플래그 필요
알렉스 그랜드

5
처음에 전 세계적으로 설치되지 않았기 때문에 나는 또한 웹팩 -g를 설치 NPM에 필요한
TJ 트랩

1
webpack 페이지에서 예제에 -g 옵션이 없기 때문에 혼란 스러웠습니다. 전역으로 설치하지 않으려면 package.json에 스크립트를 생성하고 npm run을 통해 실행할 수 있습니다.
kingd9

"npm uninstall webpack-dev-server -g --save"명령을 사용하여이 패키지를 제거하려고하지만 제거하지 않았습니다.이 패키지를 제거하는 방법을 알려주십시오.
Bhavin

32

참고로, 시도한 것처럼 명령 줄을 통해 스크립트에 액세스 하려면 dir에있는 이러한 파일과 같은 시스템에서 스크립트를 쉘 스크립트 (또는 .js, .rb와 같은 모든 종류의 스크립트) 로 등록해야합니다. /usr/binUNIX에서. 그리고 시스템은 그것들을 찾을 수있는 위치를 알아야합니다. 즉, 위치는 $PATH배열에 로드되어야합니다 .


귀하의 경우 스크립트 webpack-dev-server는 이미 ./node_modules디렉토리 내부 어딘가에 설치되어 있지만 시스템은 액세스 방법을 모릅니다. 따라서 명령에 액세스하려면 전역 범위 에서도 webpack-dev-server스크립트를 설치해야합니다 .

$ npm install webpack-dev-server -g

여기서는 -g전역 범위를 나타냅니다.


그러나 버전 충돌 문제에 직면 할 수 있으므로 권장되지 않습니다. 따라서 대신 다음 과 같이 npmpackage.json파일에 명령을 설정할 수 있습니다 .

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

이 설정을 사용하면 간단한 명령으로 원하는 스크립트에 액세스 할 수 있습니다.

$ npm start

기억하고 놀기에는 너무 짧습니다. 그리고 npm모듈의 위치를 ​​알고 webpack-dev-server있습니다.


하지만 내가 실행할 때 node_modules/.bin/webpack-dev-server왜 이것이 잘못된 명령이라고 말했습니까? 실행 node_modules/.bin/webpack-dev-server은 실행 과 동일 하다고 생각 합니다npm run dev
Chor

14

스크립트 webpack-dev-server는 이미 ./node_modules 디렉토리에 설치되어 있습니다. 다음을 통해 전역 적으로 다시 설치할 수 있습니다.

sudo npm install -g webpack-dev-server

또는 다음과 같이 실행하십시오.

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

. 현재 디렉토리에서 본다는 뜻입니다.


8

실행할 때 문제가 발생했습니다. yarn start

먼저 실행하여 수정되었습니다. yarn install


1
yarn install내 경우에는 Simple이 작동했습니다. 이유가 무엇인지 확실하지 않습니다.
Hinrich

1
또는 npm i원하는대로
Akin Hwan

5

나는 같은 문제가 있었지만 아래 단계는 내가 그것을 벗어나는 데 도움이되었습니다.

  1. 로컬로 'webpack-dev-server'설치 (전역 설치에서 선택하지 않았으므로 프로젝트 디렉토리에 있음)

    npm install --save webpack-dev-server

node_modules 내부에 'webpack-dev-server'폴더가 있는지 확인할 수 있습니다.

  1. 직접 실행을 위해 npx를 사용하여 실행

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

npm run start 또한 package.json 스크립트의 항목이 npx없이 위와 같아야하는 곳에서도 잘 작동합니다.


1

수락 된 답변이 모든 시나리오에서 작동하지 않는다는 것을 알았습니다. 100 % 작동하는지 확인하려면 npm 캐시도 지워야합니다. 캐시로 직접 이동하여 잠금, 캐시, anonymous-cli-metrics.json을 지우십시오. 또는 시도 할 수 있습니다 npm cache clean.

저자가 권장 솔루션을 시도하기 전에 캐시를 지 웠기 때문에 전제 조건의 일부로 만들지 못했습니다.


1

전역 설치의 경우 : npm install webpack-dev-server -g

로컬 설치의 경우 npm install --save-dev webpack

package.json 파일에서 webpack을 참조하면 node_modules \ .bin \ 위치에서 조회를 시도합니다.

로컬 설치 후 wbpack 파일이 \ node_modules \ .bin \ webpack 위치에 생성됩니다.


0

나는 npm install --save-dev webpack-dev-server다음과 같이 package.json 및 webpack.config.js를 설정 합니다 : setting .

그런 다음 webpack-dev-server를 실행하고이 오류 오류발생 합니다.

npm install -g webpack-dev-server설치에 사용하지 않는 경우 어떻게 수정합니까?

configuration has an unknown property 'colors'제거 하여 오류 를 수정했습니다 colors:true. 작동했습니다!


0

나는 Yarn 과 비슷한 문제가 있었고 위의 어느 것도 나를 위해 일하지 않았으므로 단순히 제거 ./node_modules하고 실행 하면 yarn install문제가 사라졌습니다.


0

npm install webpack-dev-server -g-Windows OS

권한 오류를 피하기 위해 Linux에서 sudo를 사용하는 것이 좋습니다.

sudo npm install webpack-dev-server -g

sudo npm install webpack-dev-server --save를 사용하여 package.json에 추가 할 수 있습니다.

때때로 아래 명령을 실행해야 할 수도 있습니다.

npm install webpack-cli --save 또는 npm install webpack-cli -g


npm과 함께 sudo를 사용하는 것은 조언하지 마십시오.
richardsonwtr


0

VSCode를 설치하고 원격 Git 저장소를 추가 한 후에도 동일한 문제가 발생했습니다. 어떻게 든 /node_modules/.bin폴더가 삭제되고 npm install --save webpack-dev-server명령 줄에서 실행 되어 누락 된 폴더를 다시 설치하고 문제를 해결했습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.