Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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

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 init and then installed webpack via npm using the command below :

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: 
nodejs node-modules/webpack/bin/webpack.js
The problem with this is that I have to place my webpack.config.js file inside of this directory which I want to place in my project root.
One solution to this problem was to install webpack globally on my machine    which I did using the command below : 
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)
Please tell me what I am doing wrong!!
webpack is not only in your node-modules/webpack/bin/ directory, it's also linked in node_modules/.bin. 
You have the npm bin command to get the folder where npm will install executables.
You can use the scripts property of your package.json to use webpack from this directory which will be exported.
"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.js in the root folder of your project without having webpack globally installed or having your webpack configuration in the node_modules folder.
                And how to use a 'webpack' script directly from the terminal, without saving it to package.js scripts?
– jpenna
                Jan 20, 2017 at 0:52
                This works for me. I use npm install -S webpack and npm bin to get bin path. I add the bin path to ~/.bash_profile. Then it prompts me install webpack CLI. I wait for a second it will prompts again that "would you like to install webpack-cli (yes/no)" . I typed yes and then I can use webpack.
– Shark Deng
                Sep 28, 2019 at 4:36
                @jpenna as mentioned in other answers, you can use npx webpack to run that direct from the command line. Perhaps this was not available at the time this was posted.
– redfox05
                Sep 10, 2021 at 9:54
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/
                I tried this because I don't want to install it globally. it did not fail but also did not start my project so I'm a bit lost
– Miguel Costa
                Sep 13, 2019 at 7:39
I had to reinstall webpack to get it working with my local version of webpack, e.g:
$ npm uninstall webpack
$ npm i -D webpack
                Actually this works if you had an inconclusive install (npm froze in one of the installation steps). Also if npm freezes with its installs sometimes it works if you are rebooting your machine (I have a Mac).
– atoth
                Apr 1, 2019 at 16:47
The problem with my setup was webpack was installed but webpack-cli was missing
npm i -g webpack webpack-cli
If you prefer to install locally then install without -g flag
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 webpack fails. 
When you install webpack with npm it goes inside the "node_modules\.bin" folder of your project. 
in command prompt (as administrator)
go to the location of the project where your webpack.config.js is located. 
in command prompt write the following 
"C:\Users\..\ProjectName\node_modules\.bin\webpack" --config webpack.config.vendor.js
Installing webpack with -g option installs webpack in a folder in 
C:\Users\<.profileusername.>\AppData\Roaming\npm\node_modules
same with webpack-cli and webpack-dev-server
Outside the global node_modules a link is created for webpack to be run from commandline
C:\Users\<.profileusername.>\AppData\Roaming\npm 
to make this work locally, I did the following
renamed the webpack folder in global node_modules to _old
installed webpack locally within project
edited the command link webpack.cmd and pointed the webpack.js to look into my local node_modules folder within my application
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.
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. 
example here would be to create webpack_proj1.cmd, webpack_proj2.cmd and webpack_proj3.cmd
and in each cmd follow point 2 and 3 above
PS: dont forget to update your package.json with these changes or else you'll get errors as it won't find webpack command
Actually, I have got this error a while ago. There are two ways to make this to work, as per my knowledge.
Server wont update the changes made in the index.js because of some webpack bugs. So, restart your server.
Updating your node.js will be helpful to avoid such problems.
                Please add steps for updating here. Just a link wont be much helpful. Once if the link is changed your answer turns to be useless.
– Mathews Sunny
                Dec 11, 2017 at 10:39
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.