Webpack - webpack-dev-server: 命令未找到。

137

我正在使用Webpack开发React Web应用程序,参考了这个教程

不小心把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
起初我以为只是我的项目出了问题,但是后来我检查了一下教程的代码检查点:出现了同样的错误!所以似乎全局出了点问题。
到目前为止,我尝试了以下方法:
- 用 npm install 命令卸载 node_modules 并重新安装。 - 使用 npm cache clean 命令清除缓存,正如有人在 这个 github 问题页面 上提到的那样。 - 使用 npm install -g webpack 命令全局安装 webpack。 - 完全从系统中删除 node 和 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
12个回答

209

好的,这很容易:

Okay, it was easy:

npm install webpack-dev-server -g

让我感到困惑的是一开始我并不需要那个,可能随着新版本的推出情况有所改变。


31
由于某种原因,如果不使用-g标志,它对我没有起作用。 因此:运行npm i webpack-dev-server -g解决了问题。 - Martin Velchevski
2
我也需要使用-g标志。 - Alex Grande
5
我需要执行 npm install webpack -g 命令来安装webpack,因为它一开始没有被全局安装。 - TJ Trapp
2
这很令人困惑,因为在webpack页面上,他们的示例中没有-g选项。如果您不想全局安装,可以在package.json中创建一个脚本,并通过npm run运行它。 - kingd9
我尝试使用以下命令卸载这个包 "npm uninstall webpack-dev-server -g --save",但是没有成功卸载,请告诉我如何卸载这个包。 - Bhavin
这对我解决了问题!谢谢你。 - Joe

43

提示信息:如果您希望像您尝试的那样通过命令行访问任何脚本,您需要将该脚本注册为 shell 脚本(或类似 .js、.rb 的任何类型的脚本)在 UNIX 系统中像 /usr/bin 目录中这些文件一样。并且,系统必须知道如何找到它们,即位置必须被加载到 $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
或者
$ yarn start

这个很容易记忆和使用。此外,npm 知道模块 webpack-dev-server 的位置。


但是当我运行 node_modules/.bin/webpack-dev-server 命令时,为什么会提示无效命令?我认为运行 node_modules/.bin/webpack-dev-server 等同于运行 npm run dev - Chor
1
在 webpack-dev-server 的自述文件中,他们建议使用本地安装而非全局安装! - JGFMK

17

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

. 表示查找当前目录下的文件。


12

Yarn

当运行yarn start时,我遇到了问题。

问题得以解决,通过先运行yarn install


1
在我的情况下,简单的 yarn install 就可以了。不确定原因是什么。 - Hinrich
2
无论您喜欢哪种方式,都可以使用npm i来安装所需的软件包。 - Akin Hwan

6
我遇到了同样的问题,但是以下步骤帮助我解决了它:
1. 在本地安装'webpack-dev-server'(在项目目录下,因为它没有从全局安装中获取)
```npm install --save webpack-dev-server```
可以验证'webpack-dev-server'文件夹是否存在于node_modules中。
2. 使用npx直接运行
```npx webpack-dev-server --mode development --config ./webpack.dev.js```
也可以使用```npm run start```,其中你在package.json脚本中的入口应该像上面一样,不需要npx。

2
全局安装: npm install webpack-dev-server -g 本地安装: npm install --save-dev webpack 当您在package.json文件中引用webpack时,它会尝试在node_modules\.bin\位置查找。
本地安装后,文件wbpack将在以下位置创建: \node_modules\.bin\webpack

2

我发现被接受的答案并不适用于所有情况。为了保证它百分之百有效,一个人还必须清除npm缓存。可以直接前往缓存并清除锁定、缓存、anonymous-cli-metrics.json;或者可以尝试使用npm cache clean命令。

由于作者在尝试推荐的解决方案之前已经清除了缓存,因此可能没有将其作为前提条件的一部分。


1
我在安装VSCode并添加远程Git存储库后发现了相同的问题。某种原因导致/node_modules/.bin文件夹被删除,通过在命令行中运行npm install --save webpack-dev-server重新安装缺失的文件夹,解决了我的问题。

0

我使用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'。它奏效了!


0

我在使用Yarn时遇到了类似的问题,但以上的方法都不起作用,于是我只好删除./node_modules文件夹并运行yarn install,问题就解决了。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接