node.js Webpack - webpack-dev-server：找不到命令

Webpack - webpack-dev-server: command not found

提问by Jonas Kemper

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

我正在使用 webpack 开发 React webapp，与本教程松散地一起工作。

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

偶然地，我将 node_modules 文件夹添加到了我的 git 中。然后我再次使用git rm -f node_modules/*.

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

现在，当我尝试启动 webpack 服务器时，出现以下错误：

> 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! [email protected] 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_modulesand reinstall with npm install
• npm cache cleanas 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

• rm node_modules并重新安装 npm install
• npm cache clean正如有人在 github 上提到的这个问题
• 全局安装 webpack npm install -g webpack
• 从我的系统中完全删除 node 和 npm（使用本指南）并使用 brew 重新安装

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

错误消息仍然存在。我还能尝试什么？

PS: The content of webpack.dev.config.jsis:

PS：内容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;

回答by Jonas Kemper

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.

起初我不需要那个让我感到困惑的是，可能随着新版本的出现，情况发生了变化。

回答by illusionist

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/binin UNIX. And, system must know where to find them. i.e. the location must be loaded in $PATHarray.

仅供参考，要像您尝试的那样通过命令行访问任何脚本，您需要将脚本注册为系统中的 shell 脚本（或任何类型的脚本，如 .js、.rb），就像目录中的这些文件一样 /usr/bin在 UNIX 中。而且，系统必须知道在哪里可以找到它们。即该位置必须加载到$PATH数组中。

---

---

In your case, the script webpack-dev-serveris already installed somewhere inside ./node_modulesdirectory, 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 scopeas well.

在您的情况下，该脚本webpack-dev-server已安装在./node_modules目录内的某处，但系统不知道如何访问它。因此，要访问命令webpack-dev-server，您还需要在全局范围内安装脚本。

$ npm install webpack-dev-server -g

Here, -grefers to global scope.

这里，-g指的是全局范围。

---

---

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

但是，这不是推荐的方式，因为您可能会遇到版本冲突问题；因此，您可以在npm'spackage.json文件中设置一个命令，例如：

  "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, npmknows the location of the module webpack-dev-server.

如此短的记忆和玩耍。并且，npm知道模块的位置webpack-dev-server。

回答by fangxing

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

该脚本webpack-dev-server已安装在 ./node_modules 目录中。您可以通过以下方式再次全局安装它

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.

.表示在当前目录中查找。

回答by pme

Yarn

纱

I had the problem when running: yarn start

我在运行时遇到了问题： yarn start

It was fixed with running first: yarn install

它是通过首先运行来修复的： yarn install

回答by RajaSekhar K

I had the same issue but the below steps helped me to get out of it.

我遇到了同样的问题，但以下步骤帮助我摆脱了它。

1. Installing the 'webpack-dev-server' locally (In the project directory as it was not picking from the global installation)

   npm install --save webpack-dev-server

1. 在本地安装“webpack-dev-server”（在项目目录中，因为它不是从全局安装中选择的）

   npm install --save webpack-dev-server

Can verify whether 'webpack-dev-server' folder exists inside node_modules.

可以验证 node_modules 中是否存在 'webpack-dev-server' 文件夹。

1. Running using npx for running directly

2. 使用 npx 直接运行

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

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

npm run startalso works fine where your entry in package.json scripts should be like the above like without npx.

npm run start在 package.json 脚本中的条目应该像上面那样没有 npx 时也可以正常工作。

回答by user458617

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.

我发现接受的答案并不适用于所有情况。为了确保它 100% 工作，还必须清除 npm 缓存。要么直接进入缓存，清除锁，缓存，anonymous-cli-metrics.json；或者可以试试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.

由于作者在尝试推荐的解决方案之前已清除缓存，因此可能未能使其成为先决条件的一部分。

回答by S_K

For global installation : npm install webpack-dev-server -g

全局安装： npm install webpack-dev-server -g

For local installation npm install --save-dev webpack

本地安装 npm install --save-dev webpack

When you refer webpack in package.json file, it tries to look it in location node_modules\.bin\

当您在 package.json 文件中引用 webpack 时，它会尝试在 node_modules\.bin\ 位置查找它

After local installation, file wbpack will get created in location: \node_modules\.bin\webpack

本地安装后，将在以下位置创建文件 wbpack：\node_modules\.bin\webpack

回答by user7587906

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

我安装npm install --save-dev webpack-dev-server然后我像这样设置 package.json 和 webpack.config.js： setting。

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

然后我运行 webpack-dev-server 并得到这个错误 error。

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

如果我不使用npm install -g webpack-dev-server安装，那么如何修复它？

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

我configuration has an unknown property 'colors'通过删除colors:true. 有效！

回答by Sreenivasula Reddy

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

npm install webpack-dev-server -g -- windows 操作系统

Better you use sudo in linux to avoid permission errors

最好在 linux 中使用 sudo 以避免权限错误

sudo npm install webpack-dev-server -g

须藤 npm install webpack-dev-server -g

You could use sudo npm install webpack-dev-server --save to add it to package.json.

您可以使用 sudo npm install webpack-dev-server --save 将其添加到 package.json。

Sometimes you may require to run the below commands.

有时您可能需要运行以下命令。

npm install webpack-cli --save or npm install webpack-cli -g

npm install webpack-cli --save 或 npm install webpack-cli -g

回答by ulou

I had similar problem with Yarn, none of above worked for me, so I simply removed ./node_modulesand run yarn installand problem gone.

我在Yarn 上遇到了类似的问题，以上都不适合我，所以我只是删除./node_modules并运行yarn install，问题就消失了。