Zsh: command not found: webpack

Question

I'm learning React and installed webpack through npm to my project directory but zsh is not finding the command even though I can see webpack installed in my project. I used npm init --yes followed by npm install --save webpack

Kingdom

Answer 1

EDIT: Don't do this. Bad practice.

Easy way. Install it globally.

npm i -g webpack

If you will work with webpack, install webpack-dev-server too

npm i -g webpack-dev-server

I recommend you first learn a bit about npm and then webpack.

Intellection

Per the documentation: this is not a recommended practice. webpack.js.org/get-started/install-webpack – Intermediary

@HelmutGranda Thing might be changed since. – Intellection

@Intellection It hasn't changed. Webpack docs still recommend not installing globally. – Strikebound

@Intellection It won't change; global installation of something like webpack is very bad practice. The configuration for webpack is done on a per project basis for good reason and you really don't want a version of webpack to be used other than the presumably tested version installed in your projects package.json. You can end up with broken packages this way. When working with multiple packages you can end up with a situation where they require mutually exclusive version numbers due to differing config which can't be done with a global. – Reinforcement

@Thor84no I agree. The time i wrote the answer that fixed the issue. It was probably zshell issue. – Intellection

Answer 2

There is no need to install webpack globally.

Try my way:

First, in your package.json file, add this:

"scripts": {
   "start": "webpack"
},

Then, in your terminal, run

$npm start

Another quick way: Just run (Yes, it is 'npx')

$npx webpack

That's all.

Bridgeport

Answer 3

having webpack installed locally, you could also use:

$(npm bin)/webpack

instead of:

./node_modules/.bin/webpack

Drescher

Answer 4

Installing node modules globally is a quick solution, but i recommend to add ./node_modules/.bin to the path variable and try to understand, what's the problem.

Execute

~ export PATH="./node_modules/.bin:$PATH"

Afterwards you can simply use all packages installed locally in your project. Also commands like mocha or eslint can be executed without installing these packages globally. There are several good explanations out there maybe also read this answer.

Wolgast

Don't do that... Putting relative paths in you $PATH variable is a security hole. See https://mcmap.net/q/35725/-how-to-use-executables-from-a-package-installed-locally-in-node_modules – Rexfourd

Answer 5

In my case I had this problem with webpack, grunt and gulp and seems that my problem was an issue with permissions.

I installed webpack and grunt globally. However, even then, $ webapack or $ grunt resulted in command not found

The problem was that npm installed the global packages to /usr/local/lib/node_modules which required root permissions.

So, to avoid having to use root permissions, I changed the directory in which global packages are to be installed to a directory in $HOME. To do this, I followed this guide:

Install npm packages globally without sudo on macOS and Linux

After this, I installed webpack and grunt globally again (this time without sudo) and verified that they have been installed in my new directory.

Now, I can run without problem!

$ webpack

and

$ grunt

Realpolitik

Answer 6

if you're on windows, try to get %USERPROFILE%\Appdata\Roaming\npm into your path and try again.

Stockroom