Webpack is not recognized as an internal or external command, operating program, or batch file

Question

I am learning React.js and I am using Windows 8 OS.i to navigate to my root folder

1.Created the package.json file by npm init 2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder 3. install webpack globally by typing npm install webpack -g 4. i am also having a webpack.config.js in my root folder which contains the source and ouput directory 5. when i type the webpack command i am getting the below error. 

webpack is not recognized as an internal or external command, operating program, or batch file

Answer 1

I also had this problem. (webpack installed globally, etc., but still not recognized). It turned out that I did not specify the environment variable for npm (where the webpack.cmd file is located). Therefore, I add to the variable Path

 %USERPROFILE%\AppData\Roaming\npm\ 

If you are using Powershell, you can enter the following command to effectively add to your path:

 [Environment]::SetEnvironmentVariable("Path", "$env:Path;%USERPROFILE%\AppData\Roaming\npm\", "User") 

IMPORTANT: Remember to close and reopen the PowerShell window to apply this.

Hope it helps.

Answer 2

The best solution to this problem is to install Webpack globally.

It always works, and it worked for me. Try the command below.

 npm install -g webpack 

Answer 3

Alternatively, if you have installed Webpack locally, you can explicitly specify where the command line should look to find it, for example, like this:

 node_modules\.bin\webpack 

(This assumes that you are in the directory with your package.json and that you have already run npm install webpack .)

Answer 4

npm install -g webpack-dev-server will solve your problem

Answer 5

Add the webpack command as an npm script in package.json.

 { "name": "react-app", "version": "1.0.0", "scripts": { "compile": "webpack --config webpack.config.js" } } 

Then run

npm compile

When the web package is installed, it creates a binary folder. / node_modules / .bin. Npm scripts also look for the executable file created in this folder

Answer 6

The webpack command line interface is now in a separate package and must be installed globally in order to use the webpack command:

 npm install -g webpack-cli 

EDIT: a lot has changed. Webpack people do not recommend installing the CLI globally (or separately for that matter). This problem should be fixed now, but the correct installation command:

 npm install --save-dev webpack 

This answer was originally conceived as a "workaround" for the OP problem.

Answer 7

Try removing node_modules in the local directory and restart npm install .

Answer 8

Just run your command line (cmd) as administrator.

Answer 9

I had the same problem and I just added a block of code to the package.json file;

  "scripts": { "build": "webpack -d --progress --colors" } 

and then run the command on the terminal;

 npm run build 

Answer 10

you need to install webpack and webpack-cli in the same volume.

 npm i -g webpack webpack-cli 

or,

 npm i webpack webpack-cli 

if you install it locally you need to name it

 node_modules/.bin/webpack -v 

Answer 11

We also ran into this problem, and I like all the answers that suggest using the script defined in package.json .

For our decisions, we often use the following sequence:

1. npm install --save-dev webpack-cli (if you use webpack v4 or later, otherwise use npm install --save-dev webpack , see npm install --save-dev webpack package , received January 19, 2019 )
2. npx webpack

Step 1 is one-time. Step 2 also checks ./node_modules/.bin . You can also add the second step as an npm script in package.json , for example:

 { ... "scripts": { ... "build": "npx webpack --mode development", ... }, ... } 

and then use npm run build to execute this script.

I tested this solution with version npm 6.5.0, version webpack 4.28.4, and version webpack-cli 3.2.1 on Windows 10 by running all the commands inside the PowerShell window. My version of nodejs / was 10.14.2. I also tested this on Ubuntu Linux version 18.04.

I would not recommend installing web packages globally, especially if you work with many different projects, each of which may require a different version of the web package. Installing a web package globally blocks access to a specific version in all projects on the same computer.

Answer 12

Install WebPack Globally

 npm install --global webpack 

Answer 13

I got the same error, none of the solutions worked for me, I reinstalled the node and restored my environment, everything works again.

Answer 14

If you just cloned a repo, you first need to run

 npm install 

The error you get will be generated if you miss project dependencies. The above command will download and install them.

Answer 15

Try it guys Cli needs to be updated to the latest version

 npm install --save-dev @angular/cli@latest 

Credit goes to R. Richards

Answer 16

For me, the fix was to install the web package locally as devDependency. Although I have it as devDependencies it was not installed in the node_modules folder. So, I ran npm install --only=dev

Answer 17

For me, it worked to install the web package separately. So simple:

 $npm install $npm install webpack 

I'm not sure why this is necessary, but it worked.

Answer 18

 npx webpack 

This works for me. I am using Windows 10 and I installed the web package locally.

Answer 19

Sometimes npm install -g webpack is not saved properly. Better use npm install webpack --save . It worked for me.

Answer 20

I had the same problem and could not figure it out. I looked through each line of code and could not find my error. Then I realized that I installed the web package in the wrong folder. My error did not pay attention to the folder in which I installed the web package.