webpack命令无法正常工作

Question

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

首先，我安装了nodeJs和NPM，并创建了一个名为tutorial的新目录。我使用命令提示符进入此目录，然后运行以下命令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命令。但是，此命令似乎不起作用或根本不做任何事情。当我尝试从我的项目的root directroy运行它时，它根本不做任何事情（见截图）

请告诉我我做错了什么!!

Answer 1

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

你有npm bin命令来获取npm将安装可执行文件的文件夹。

您可以使用scripts的{​​{1}}属性来使用此目录中的webpack来导出。

package.json

例如：

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

然后您可以使用以下命令运行它：

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

甚至是参数：

npm run build

这允许您在项目的根文件夹中拥有npm run build -- <args> ，而无需在全局安装webpack或在webpack.config.js文件夹中安装webpack。

Answer 2

npm i webpack -g

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

Answer 3

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

$ npm uninstall webpack
$ npm i -D webpack

Answer 4

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

Answer 5

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

npm i -g webpack webpack-cli

如果您更喜欢在本地安装，则安装时不带 -g 标志

Answer 6

最快的方法就是使用来自其他位置的Web包，这将阻止您必须全局安装或者npm run webpack失败。

当您使用npm安装webpack时，它会进入＆＃34; node_modules\.bin＆＃34;项目的文件夹。

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

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

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

Answer 7

使用-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

要在本地进行此工作，我做了以下

1. 将全局node_modules中的webpack文件夹重命名为_old
2. 在项目中本地安装webpack
3. 编辑了命令链接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命令

Answer 8

实际上，我刚才有这个错误。根据我的知识，有两种方法可以使其发挥作用。

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