webpack命令不起作用

Posted 2023-03-06

【中文标题】webpack命令不起作用

【英文标题】：webpack command not working

【发布时间】：2016-12-11 19:20:54

【问题描述】：

我是 Node Js 和 Webpack 的新手。我尝试使用模块加载器启动一个项目。

首先，我安装了 nodeJs 和 NPM 并创建了一个名为 tutorial 的新目录。我使用命令提示符 cd 进入该目录，然后运行以下命令 npm init，然后使用以下命令通过 npm 安装 webpack：

npm install -S webpack

第一个命令将 webpack 本地安装到“node-modules”目录下的项目中，我可以通过这样做来运行我的项目：

nodejs node-modules/webpack/bin/webpack.js

问题在于我必须将我的webpack.config.js 文件放在我想放在我的项目根目录中的这个目录中。

这个问题的一个解决方案是在我的机器上全局安装 webpack，我使用以下命令：

npm install -g webpack

这安装了 Webpack，现在我确实有一个 Webpack 命令。但是，这个命令似乎根本没有工作或做任何事情。当我尝试从我的项目的根目录运行它时，它根本不做任何事情（见截图）

请告诉我我做错了什么！

【参考方案1】：

我的设置问题是安装了 webpack 但缺少 webpack-cli

npm i -g webpack webpack-cli

如果您更喜欢在本地安装，那么安装时不要使用-g 标志

【参考方案2】：

您可以运行npx webpack。随 Node 8.2/npm 5.2.0 或更高版本附带的 npx 命令运行 webpack 包的 webpack 二进制文件 (./node_modules/.bin/webpack)。 信息来源：https://webpack.js.org/guides/getting-started/

【讨论】：

我试过这个是因为我不想全局安装它。它没有失败，但也没有开始我的项目，所以我有点迷茫

【参考方案3】：

使用 -g 选项安装 webpack 会将 webpack 安装在文件夹中

C:\Users\<.profileusername.>\AppData\Roaming\npm\node_modules

与 webpack-cli 和 webpack-dev-server 相同

在全局 node_modules 之外，会为 webpack 创建一个链接，以便从命令行运行

C:\Users\<.profileusername.>\AppData\Roaming\npm

为了在本地完成这项工作，我做了以下操作

将全局 node_modules 中的 webpack 文件夹重命名为 _old 在项目中本地安装 webpack 编辑命令链接 webpack.cmd 并指向 webpack.js 以查看我的应用程序中的本地 node_modules 文件夹

这种方法的问题是您必须为您拥有的每个项目维护链接。没有其他方法，因为您在使用 -g 选项安装时使用命令行编辑器运行 webpack 命令。

因此，如果您的 proj1、proj2 和 proj3 都安装了本地 node_modules 和本地 webpack（安装时不使用 -g），那么您必须创建非通用链接名称而不仅仅是 webpack。

这里的示例是创建 webpack_proj1.cmd、webpack_proj2.cmd 和 webpack_proj3.cmd 并在每个 cmd 中遵循上面的第 2 点和第 3 点

PS：不要忘记用这些更改更新你的 package.json，否则你会收到错误，因为它找不到 webpack 命令

【讨论】：

顺便说一句：那是 Windows 10

【参考方案4】：

我必须重新安装 webpack 才能使用我的本地版本的 webpack，例如：

$ npm uninstall webpack
$ npm i -D webpack

【讨论】：

实际上，如果您的安装不确定（npm 在安装步骤之一中冻结），则此方法有效。此外，如果npm 安装时冻结，有时如果您重新启动机器（我有一台 Mac），它会起作用。

【参考方案5】：

最快的方法是使用另一个位置的 web pack，这将阻止你必须全局安装它，或者如果npm run webpack 失败。

当您使用 npm 安装 webpack 时，它会进入项目的“node_modules\.bin”文件夹中。

在命令提示符下（以管理员身份）

转到您的 webpack.config.js 所在项目的位置。 在命令提示符下写入以下内容

"C:\Users\..\ProjectName\node_modules\.bin\webpack" --config webpack.config.vendor.js

【参考方案6】：

实际上，我前段时间遇到过这个错误。据我所知，有两种方法可以让它发挥作用。

由于一些 webpack 错误，服务器不会更新 index.js 中所做的更改。所以，重启你的服务器。 更新您的 node.js 将有助于避免此类问题。

【讨论】：

请在此处添加更新步骤。只是一个链接不会有太大帮助。一旦链接被更改，你的答案就会变得毫无用处。

【参考方案7】：

npm i webpack -g

在您的系统上全局安装 webpack，使其在终端窗口中可用。

【讨论】：

不建议在全球范围内安装 WebPack，根据他们的文档

有趣的是有相同的答案标记得很好-***.com/questions/35932000/…

【参考方案8】：

webpack 不仅在您的node-modules/webpack/bin/ 目录中，还链接在node_modules/.bin 中。

您可以使用npm bin 命令获取 npm 将安装可执行文件的文件夹。

您可以使用 package.json 的 scripts 属性来使用此目录中的 webpack，该目录将被导出。

"scripts": 
  "scriptName": "webpack --config etc..."

例如：

"scripts": 
  "build": "webpack --config webpack.config.js"

然后你可以运行它：

npm run build

甚至带有参数：

npm run build -- <args>

这允许您将webpack.config.js 放在项目的根文件夹中，而无需全局安装 webpack 或将 webpack 配置放在 node_modules 文件夹中。

【讨论】：

以及如何直接从终端使用'webpack'脚本，而不将其保存到package.js脚本？

你可以在你的系统中全局安装 webpack 然后触发命令

这对我有用。我使用npm install -S webpack 和npm bin 来获取bin 路径。我将 bin 路径添加到 ~/.bash_profile。然后它提示我安装 webpack CLI。我稍等片刻，它会再次提示 "would you like to install webpack-cli (yes/no)" 。我输入了 yes，然后我可以使用 webpack。

@jpenna 如其他答案中所述，您可以使用 npx webpack 从命令行直接运行。也许这在发布时不可用。