node.js webpack 命令不起作用

webpack command not working

提问by Mohan

I am new to Node Js and Webpack. I tried to start a project with module-loaders.

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

Firstly, I installed nodeJs and NPM and created a new directory called tutorial. I used the command prompt to cd into this directory and then ran the following command npm initand then installed webpack via npmusing the command below :

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

npm install -S webpack

The 1st command installed webpack locally into the project under the 'node-modules' directory and I can run my project by doing this:

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

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

The problem with this is that I have to place my webpack.config.jsfile inside of this directory which I want to place in my project root.

这样做的问题是我必须将我的webpack.config.js文件放在这个目录中，我想把它放在我的项目根目录中。

One solution to this problem was to install webpack globally on my machine which I did using the command below :

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

npm install -g webpack

This installed Webpack and now I do have a Webpack command. However, this command does not seem to be working or doing anything at all. When I try to run this from my project's root directroy it does not do anything at all (See Screenshot)

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

Please tell me what I am doing wrong!!

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

回答by HiDeo

webpackis not only in your node-modules/webpack/bin/directory, it's also linked in node_modules/.bin.

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

You have the npm bincommand to get the folder where npm will install executables.

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

You can use the scriptsproperty of your package.jsonto use webpack from this directory which will be exported.

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

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

For example:

例如：

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

You can then run it with:

然后你可以运行它：

npm run build

Or even with arguments:

或者甚至有参数：

npm run build -- <args>

This allow you to have you webpack.config.jsin the root folder of your project without having webpack globally installed or having your webpack configuration in the node_modulesfolder.

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

回答by Andrei Bacescu

You can run npx webpack. The npx command, which ships with Node 8.2/npm 5.2.0 or higher, runs the webpack binary (./node_modules/.bin/webpack) of the webpack package. Source of info: https://webpack.js.org/guides/getting-started/

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

回答by user6922299

npm i webpack -g

installs webpack globally on your system, that makes it available in terminal window.

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

回答by mythz

I had to reinstall webpack to get it working with my local version of webpack, e.g:

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

$ npm uninstall webpack
$ npm i -D webpack

回答by peacemaker

Installing webpack with -g option installs webpack in a folder in

使用 -g 选项安装 webpack 会将 webpack 安装在

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

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

same with webpack-cli and webpack-dev-server

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

Outside the global node_modules a link is created for webpack to be run from commandline

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

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

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

to make this work locally, I did the following

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

1. renamed the webpack folder in global node_modules to _old
2. installed webpack locally within project
3. edited the command link webpack.cmd and pointed the webpack.js to look into my local node_modules folder within my application

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

Problem with this approach is you'd have to maintain links for each project you have. Theres no other way since you are using the command line editor to run webpack command when installing with a -g option.

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

So if you had proj1, proj2 and proj3 all with their local node_modules and local webpack installed( not using -g when installing), then you'd have to create non-generic link names instead of just webpack.

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

example here would be to create webpack_proj1.cmd, webpack_proj2.cmd and webpack_proj3.cmdand in each cmd follow point 2 and 3 above

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

PS: dont forget to update your package.json with these changes or else you'll get errors as it won't find webpack command

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

回答by Joshua Duxbury

The quickest way, just to get this working is to use the web pack from another location, this will stop you having to install it globally or if npm run webpackfails.

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

When you install webpack with npm it goes inside the "node_modules\.bin" folder of your project.

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

in command prompt (as administrator)

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

1. go to the location of the project where your webpack.config.js is located.
2. in command prompt write the following

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

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

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

回答by Thananjaya S

Actually, I have got this error a while ago. There are two ways to make this to work, as per my knowledge.

实际上，我不久前就遇到了这个错误。据我所知，有两种方法可以使它起作用。

1. Server wont update the changes made in the index.js because of some webpack bugs. So, restart your server.
2. Updating your node.js will be helpful to avoid such problems.

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