23

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

akantoword
  • 2,824
  • 8
  • 26
  • 43

6 Answers6

25

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.

J.Du
  • 271
  • 3
  • 4
20

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.

atilkan
  • 4,527
  • 1
  • 30
  • 35
  • 16
    Per the documentation: this is not a recommended practice. https://webpack.js.org/get-started/install-webpack/ – Helmut Granda Dec 08 '16 at 23:08
  • @HelmutGranda Thing might be changed since. – atilkan Dec 12 '16 at 21:17
  • 4
    @atilkan It hasn't changed. Webpack docs still recommend not installing globally. – Ralph David Abernathy May 06 '18 at 02:23
  • 1
    @atilkan 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. – Vala Sep 06 '19 at 08:28
  • @Thor84no I agree. The time i wrote the answer that fixed the issue. It was probably zshell issue. – atilkan Sep 06 '19 at 09:14
10

having webpack installed locally, you could also use: 

$(npm bin)/webpack

instead of: 

./node_modules/.bin/webpack
Jan Viehweger
  • 522
  • 5
  • 19
9

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.

Community
  • 1
  • 1
teberl
  • 445
  • 5
  • 6
  • 1
    Don't do that... Putting relative paths in you $PATH variable is a security hole. See http://stackoverflow.com/a/9683472/1521572 – WrksOnMyMachine May 06 '17 at 19:52
2

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

Jorge Casariego
  • 21,948
  • 6
  • 90
  • 97
0

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

arviman
  • 5,087
  • 41
  • 48