Webpack - webpack-dev-server：找不到命令

Question

我正在使用 webpack 开发一个 React webapp，与this tutorial 松散地一起工作。

无意中，我将 node_modules 文件夹添加到了我的 git 中。然后我再次使用git rm -f node_modules/* 将其删除。

现在，当我尝试启动 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! 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 有人提到过this issue on github
• 使用npm install -g webpack全局安装webpack
• 从我的系统中完全删除 node 和 npm（使用 this guide）并使用 brew 重新安装

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

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;

Answer 1

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

---

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

$ npm install webpack-dev-server -g

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

---

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

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

此设置可让您使用简单的命令访问所需的脚本

$ npm start

或

$ yarn start

记忆和玩的时间太短了。而且，npm 知道模块 webpack-dev-server 的位置。

Answer 2

在安装 VSCode 并添加远程 Git 存储库后，我注意到了同样的问题。不知何故，/node_modules/.bin 文件夹被删除并在命令行中运行 npm install --save webpack-dev-server 重新安装了丢失的文件夹并解决了我的问题。

Answer 3

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

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

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

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

Answer 4

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

最好在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

Answer 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。

Answer 6

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

Answer 7

纱线

运行时遇到问题：yarn start

先运行已修复：yarn install

Answer 8

我发现接受的答案并非在所有情况下都有效。为了确保它 100% 正常工作，还必须清除 npm 缓存。要么直接转到缓存并清除锁、缓存、anonymous-cli-metrics.json；或者可以试试npm cache clean。

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

Answer 9

脚本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

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

Answer 10

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

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

如果我不使用npm install -g webpack-dev-server安装，那怎么解决呢？

我通过删除colors:true 修复了错误configuration has an unknown property 'colors'。成功了！

Answer 11

好的，很简单：

npm install webpack-dev-server -g

让我感到困惑的是，我一开始并不需要它，可能是新版本改变了。