Npm, Node, Webpack - how to figure it out for a beginner?

Question

npm

Hello.
There are several projects deployed on my OS X computer in which I work as a HTML layout designer. Many of them used grunt and webpack, node-js, and other fancy stuff.
Right now, I'd like to dive deeper into slim/slim/less/sass and other fancy things that require grunt/webpack, but I can't figure out how best to start these mini-projects.
I have a few questions.

1. I know that I have node installed. I do node -v , I get 6.8.1 in the console and also 7.0.0 in some of the projects. Is it normal practice to have several versions of Noda installed? How to globally install the best version and remove the redundant one?
   
2. I created a new folder for my test project, went into this folder and called the npm install -g webpack-cli command through the console , but the console says that the npm command was not found, although it works in the directories of third-party projects. Why not found? Probably, you need to do something to make it work globally? How? Or should it be done some other way?
   
3. In the new project folder, I do brew install npm , but the console tells me the following:
   

   You can link formula with `brew link node`
   Warning: node-7.1.0 already installed, it's just not linked

   
   While googling, I found references to symbolic links, editing bash_profile and other things that are incomprehensible to me. How to make a symbolic link so that the npm command works everywhere and from all directories? Is it correct? Is it necessary to do so? And if not, then how?
   
4. . Suppose we solved the problem, created the project, and everything worked. And tomorrow, let's say, I needed to create ten more such projects with only one webpack and layout inside. What do i do? Is there any single algorithm for quickly starting mini-projects using webpack?
   

Naturally, I would like to do all this as canonically as possible (so as not to produce crutches on my PC), and also so that already working projects do not break.
I would be happy for advice, links to articles and books, where to read and how to better understand this entire system.

Thank you!

Answer 1

1. Strange, I have never seen a node with different versions in different directories before. Let's take a closer look here with screenshots.
2 and 3 - I suggest completely uninstalling node , and then installing NVM for yourself , and when it installs through it, install the latest and other necessary versions of node, if necessary (usually the last one is enough, but for older projects it may be necessary).
4 - just copy the webpack config from the project to the project and cut it. Then, for example, a thought comes to you: so, these five projects had common files such and such, a common folder structure, and such a parameter in the config. How can I generalize this? How can I put it in a separate directory, from which I will then simply copy the finished template? (usually you just need to copy ;) ). When you have a template ready, you will join the world with an exclamation: I have my own boilerplate. Then you can look at others (google webpack boilerplate), but do not immediately take someone else's just like that, but take it apart piece by piece.
ps I have never needed to take "just for layout" webpack. For these purposes, I use gulp + browserify, and when I write in react - webpack.
p.s. what to read? In a nutshell, google for the following: what node.js is, how npm is related to it, what happens when you do npm install, how the scripts section in package.json works.

Answer 2

Note that npm install -g webpack-cli will install webpack-cli globally and not in your project.
I can recommend an excellent recent guide: "JavaScript Stack from Scratch"
in Russian translation: https://github.com/UsulPro/js-stack-from-scratch