Webpack - webpack-dev-server: command not found

问题:

I am working on a React webapp using webpack, loosely alongside this tutorial.

Accidentally, I added the node_modules folder to my git. I then removed it again using git rm -f node_modules/*.

Now, when I try starting the webpack server, I get the following error:

> 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 

At first I thought it was only my project, but then I checked out the code checkpoints of the tutorial: same error! So something seems to be messed up globally.

Here's what I tried so far:

• rm node_modules and reinstall with npm install
• npm cache clean as someone mentioned regarding this issue on github
• install webpack globally with npm install -g webpack
• completely delete node and npm from my system (using this guide) and reinstall using brew

The error message still persists. What else can I try?

PS: The content of webpack.dev.config.js is:

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; 

回答1:

Okay, it was easy:

npm install webpack-dev-server -g 

What confused me that I did not need that at first, probably things changed with a new version.

回答2:

FYI, to access any script via command-line like you were trying, you need to have the script registered as a shell-script (or any kind of script like .js, .rb) in the system like these files in the the dir /usr/bin in UNIX. And, system must know where to find them. i.e. the location must be loaded in $PATH array.

---

In your case, the script webpack-dev-server is already installed somewhere inside ./node_modules directory, but system does not know how to access it. So, to access the command webpack-dev-server, you need to install the script in global scope as well.

$ npm install webpack-dev-server -g 

Here, -g refers to global scope.

---

However, this is not recommended way because you might face version conflicting issues; so, instead you can set a command in npm's package.json file like:

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

This setting will let you access the script you want with simple command

$ npm start 

So short to memorize and play. And, npm knows the location of the module webpack-dev-server.

回答3:

The script webpack-dev-server is already installed inside ./node_modules directory. You can either install it again globally by

sudo npm install -g webpack-dev-server 

or run it like this

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

. means look it in current directory.

回答4:

Yarn

I had the problem when running: yarn start

It was fixed with running first: yarn install

回答5:

I install with npm install --save-dev webpack-dev-server then I set package.json and webpack.config.js like this: setting.

Then I run webpack-dev-server and get this error error.

If I don't use npm install -g webpack-dev-server to install, then how to fix it?

I fixed the error configuration has an unknown property 'colors' by removing colors:true. It worked!

回答6:

I found the accepted answer does not work in all scenarios. To ensure it 100% works one must ALSO clear the npm cache. Either directly Goto the cache and clear locks, caches, anonymous-cli-metrics.json; or one can try npm cache clean.

Since the author had cleared the cache before trying the recommended solution its possible that failed to make it part of the pre-requisites.

文章来源: Webpack - webpack-dev-server: command not found