webpack 不被识别为内部或外部命令、可运行程序或批处理文件

Posted 2023-03-06

【中文标题】webpack 不被识别为内部或外部命令、可运行程序或批处理文件

【英文标题】：webpack is not recognized as a internal or external command,operable program or batch file

【发布时间】：2016-06-19 00:31:25

【问题描述】：

我正在学习 React.js，我正在使用 Windows 8 OS。我已经导航到我的根文件夹

1.Created the package.json file by npm init
2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder
3. install webpack globally by typing npm install webpack -g
4. i am also having a webpack.config.js in my root folder which contains the source and ouput directory
5. when i type the webpack command i am getting the below error.

webpack 未被识别为内部或外部命令、可运行程序或批处理文件

【问题讨论】：

我遇到了这个问题，但是重启IDE（在我的情况下是phpStorm）后问题解决了

【参考方案1】：

解决这个问题更好的办法是全局安装Webpack。

这总是有效的，它对我有用。试试下面的命令。

npm install -g webpack

【讨论】：

我认为应该注意的是，使用 -g 会全局安装 webpack，如果您有多个项目可能需要不同版本的 webpack，您可能不希望这样做。

我也跑了npm install -g webpack-cli。现在可以了。

【参考方案2】：

作为替代方案，如果您在本地安装了 Webpack，您可以明确指定命令提示符应该在哪里找到它，如下所示：

node_modules\.bin\webpack

（这确实假设您在带有package.json 的目录中并且您已经运行了npm install webpack。）

【讨论】：

同意 Max，原因是建议在本地安装 webpack（在 devDependencies 中） - 我的问题有点不同，但在 VS 2017 中添加 webpack 作为预构建步骤时，我认为 VS 足够聪明，可以在没有完整路径的情况下在本地找到 webpack cmd

@JimiSweden 您是否尝试将node_modules\.bin 添加到工具->配置外部工具

您可以尝试使用npx webpack，它还会检查./node_modules/.bin，而不是摆弄路径。

这是迄今为止唯一对我有用的答案。

【参考方案3】：

我也有这个问题很长时间了。 （webpack 已全局安装等，但仍无法识别） 原来我没有为 npm 指定环境变量（文件 webpack.cmd 在哪里） 所以我添加到我的 Path 变量中

%USERPROFILE%\AppData\Roaming\npm\

如果您使用的是 Powershell，您可以键入以下命令来有效地添加到您的路径中：

[Environment]::SetEnvironmentVariable("Path", "$env:Path;%USERPROFILE%\AppData\Roaming\npm\", "User")

重要提示：不要忘记关闭并重新打开您的 powershell 窗口以应用此功能。

【讨论】：

好吧，我被困在同一个地方......你能详细说明你的答案吗

我按照所有步骤进行操作，但没有成功，然后我终于意识到，我没有以管理员身份打开 CMD。

最好设置为 %APPDATA%\npm

【参考方案4】：

npm install -g webpack-dev-server 将解决您的问题

【讨论】：

它可能会解决 OP 发布的错误消息，但这不是解决问题的好方法，因为它增加了更多的依赖项，而不是 只是 解决缺少的 webpack。查看任何其他高票数的答案以获得更好的选择。

正如不同的贡献者已经指出的那样（参见其他答案/cmets），全局安装被认为是不好的做法，因为它会将您锁定在一个版本中。另见webpack.js.org/guides/installation

我遇到了这个问题，你的解决方案很好地解决了我的问题'webpack-dev-server' is not recognized as an internal or external command, operable program or batch file.

【参考方案5】：

尝试删除本地目录中的node_modules，然后重新运行npm install。

【参考方案6】：

也许全新安装可以解决问题。这个“命令”会删除所有以前的模块并重新安装它们，可能是在 webpack 模块没有完全下载和安装的时候。

npm clean-install

【参考方案7】：

在你的 package.json 中添加 webpack 命令作为 npm 脚本。

    "name": "react-app",
    "version": "1.0.0",
    "scripts": 
      "compile": "webpack --config webpack.config.js"
    

然后运行

npm 运行编译

安装 webpack 时，它会在 ./node_modules/.bin 文件夹中创建一个二进制文件。 npm scripts 还会查找在此文件夹中创建的可执行文件

【讨论】：

不起作用 - npm install -g webpack-dev-server 是正确的命令

【参考方案8】：

Webpack CLI 现在位于一个单独的包中，必须全局安装才能使用“webpack”命令：

npm install -g webpack-cli

编辑：发生了很大变化。 Webpack 人员不建议全局安装 CLI（或单独安装）。现在应该修复此问题，但正确的安装命令是：

npm install --save-dev webpack

此答案最初旨在作为 OPs 问题的“解决方法”。

【讨论】：

“必须全局安装”据我了解是不正确的。甚至 webpack 的人也反对它。见webpack.js.org/guides/installation

【参考方案9】：

我们也遇到过这个问题，我喜欢所有建议使用package.json 中定义的脚本的答案。

对于我们的解决方案，我们经常使用以下顺序：

npm install --save-dev webpack-cli（如果您使用的是 webpack v4 或更高版本，否则使用 npm install --save-dev webpack，请参阅 webpack installation，检索于 2019 年 1 月 19 日） npx webpack

第 1 步是一次性的。步骤 2 还检查 ./node_modules/.bin。您也可以将第二步作为 npm 脚本添加到 package.json，例如：

   ...
   "scripts": 
      ...
      "build": "npx webpack --mode development",
      ...
   ,
   ...

然后使用npm run build 执行此脚本。

在 Windows 10 上使用 npm 版本 6.5.0、webpack 版本 4.28.4 和 webpack-cli 版本 3.2.1 测试此解决方案，在 PowerShell 窗口内执行所有命令。我的 nodejs 版本是/曾经是 10.14.2。我还在 Ubuntu Linux 版本 18.04 上对此进行了测试。

我建议不要在全局范围内安装 webpack，特别是如果您正在处理许多不同的项目，每个项目都可能需要不同版本的 webpack。全局安装 webpack 会将您锁定到同一台机器上所有项目的特定版本。

【参考方案10】：

npx webpack

它对我有用。我使用的是 Windows 10，并在本地安装了 webpack。

【参考方案11】：

你必须在同一个范围内安装 webpack 和 webpack-cli。

npm i -g webpack webpack-cli

或者，

npm i webpack webpack-cli

如果你在本地安装它，你需要专门调用它

node_modules/.bin/webpack -v

【讨论】：

或者，如果安装在本地，你可以使用npx webpack（使用npm 6.5.0、webpack 4.28.4和webpack-cli 3.2.1测试）

那是票

npm i -g webpack webpack-cli

【参考方案12】：

对我来说，单独安装 webpack 是可行的。很简单：

$npm install
$npm install webpack

我不确定为什么需要这样做，但它确实有效。

【参考方案13】：

只需以管理员身份运行命令行 (cmd)。

【参考方案14】：

我遇到了同样的问题，只是将代码块添加到我的 package.json 文件中；

 "scripts": 
   "build": "webpack -d --progress --colors"
 

然后在终端上运行命令；

npm run build

【参考方案15】：

全局安装 WebPack

npm install --global webpack

【参考方案16】：

如果您为您的 JS 项目创建一个样板文件夹以便您可以使用 JS 模块，webpack 和 Babel 是很好的工具。

不要全局安装webpack，在安装两者的最新版本后，您的package.json 文件将被加载并准备复制以用于未来的项目。

确保删除 node_modules 文件夹以减小样板文件夹中的文件大小，然后使用 npm install 重新安装 node_modules。

我忘记运行 npm install 并在尝试运行我的 webpack dev-server 时一直收到此错误，直到我意识到我需要运行 npm install 来安装 node_modules 然后它才起作用。

【讨论】：

删除 node_modules + npm install 让我重新开始。谢谢！

【参考方案17】：

如果你刚刚克隆了一个 repo，你首先需要运行

npm install

如果您缺少项目依赖项，则会生成您得到的错误。上面的命令将下载并安装它们。

【参考方案18】：

我在升级到 React 16.12.0 时遇到了这个问题。

在渲染 DOM 时，我遇到了两个错误，一个是关于 webpack，另一个是关于 store。

Webpack 错误：

webpack 不是内部或外部命令、可运行程序或批处理文件

Webpack 解决方案：

关闭相关VS解决方案 删除node_modules文件夹 已删除package-lock.json npm install npm rebuild 重复了 2-3 次

存储错误：

Type Store 不可分配给类型 Store

商店解决方案：

更新我的 React 版本的建议并没有为我解决这个错误，但无论如何我都建议这样做。

我的代码最终看起来像这样：

ReactDOM.render(
        <Provider store=store as any>
            <ConnectedApp />
        </Provider>,
        document.getElementById('app')
    );

根据this solution

【参考方案19】：

以下给出的命令对我有用。

npm cache clean --force
npm install -g webpack

注意 - 以管理员身份运行这些命令。安装后，关闭命令提示符并重新启动它以查看应用的更改。

【参考方案20】：

我遇到了同样的错误，没有一个解决方案对我有用，我重新安装了节点并修复了我的环境，一切都恢复了。

【讨论】：

这也是我必须做的。我尝试了此处提供的至少三个其他“解决方案”，但除了再次卸载并重新安装 Node 之外，没有一个有效。

【参考方案21】：

试试这个，cli需要更新到最新版本

npm install --save-dev @angular/cli@latest

归功于 R.Richards https://***.com/a/44526528/1908827

【参考方案22】：

对我来说，解决方法是在本地将 webpack 安装为 devDependency。尽管我将其命名为devDependencies，但它并未安装在 node_modules 文件夹中。所以我跑了 npm install --only=dev

【参考方案23】：

有时 npm install -g webpack 无法正确保存。最好使用 npm install webpack --save 。它对我有用。

【讨论】：

-g 全局安装（不是您的本地项目 node_modules + package.json），而 --save 安装在本地（在您的本地 node_modules + package.json 中）所以这个答案是错误的。

【参考方案24】：

我遇到了同样的问题，但我无法解决。我浏览了每一行代码，但找不到我的错误。然后我意识到我在错误的文件夹中安装了 webpack。我的错误是没有注意我安装 webpack 的文件夹。