工欲善其事必先利其器！
相信大家用 webpack，但是 npm各种配置不成功肯定会遇到，
webpack还没用，兴致就少了一半，文章最终目的 ，以webpack为例， 正常的 调用起各种npm依赖包，完成一次打包
本文讲解涉及： node、npm、环境变量、packjson、packjson中的 开发工具（dev）、packjson中的 生产工具（depen）、全局安装、本地安装、引入别人项目得 包
开始
一、安装node，，，现在的node会帮你自动安装 npm
提示：node可以装8.1.2 版本，现在官网上的 node 8.11.1其实不太稳定，比如里面的 npm，会经常 神经的 找不到 npm-cli这个东西 ）
如果出现红框这句话，，，整个 npm废了，，npm -v这种简单的都执行不了了， 要么你之前安装了 gnvm 这种npm版本管理器 来换个版本，要么重装 node。8.1.2版没出现过这种问题！
二、安装好后 ，可执行 node -v 和 npm -v看一下是否成功
三、现在，可以安装其它包，安装之前 做一点配置。
步骤：
1、设置一个 全局的包的文件夹（最好是node 安装目录下，下面的路径是你想存放 全局包的路径）
打开cmd 小黑窗 输入
npm config set prefix “G:\node\node_global”
2、设置一个缓存包的文件夹 （可选）
npm config set cache “G:\node\node_cache”
提示： node 安装目录下的 node_modules 是个本地安装目录，只有到了这个项目目录下才 能 调用，（包括node小黑窗调用，除非是全局安装).。有其它方法 ，可以让其它地方 指引到个目录，下面会讲到
四、设置 环境变量，，，什么是 环境变量（系统变量） PATH 和 NODE_PATH
步骤： 我的电脑 -- 右键属性 --高级系统设置 --环境变量
提示：就 你在执行某个 程序 ，但是 这个程序路径下 没有 所需要的 依赖文件，，就会从 系统变量 规则 里 寻找！ 比如 ，你在 g:\test 目录下 执行 webpack，，，但是 test 目录下 你是 没有本地安装 webpack 这些 node_moudules依赖程序，，那么它会要去 那个系统变量里 找到路径对应关系
授人以鱼 不 如 授人以渔，，教你怎么设 ，还要说下，每个的作用
提示一： 为什么我把 用户变量叉掉，，因为 用户变量的设置 是只对当前 用户有效，换个账号登录，设置都没，，但是 系统变量会 对 全部账号都生效，，path里可能有很多 条记录，，用 ";" 分号隔开就好
提示二： PATH 和 NODE_PATH为何，，网上很多复制粘贴的 ，叫你设置 path node path ，其实他们也不知道个所以然，其实我也不到清楚，但是 我用 实验 验证 他们的 作用，你们也可以试试，
path，指向 全局安装包 的 路径，，，就步骤三里的 node_global，不用深入到 node_modules，因为全局安装的 依赖包 会 在 node_modules同级目录下 有个cmd命令行，，会指引到 同目录的 node_modules
node_path ,,要 写到 node_modules 这个目录，，就不想在 这个项目A 里不想重新安装一遍，，但是又没全局安装，，这个 node_path,就能 指引 到 整个 node 安装目录下的 node_modules，
五、全局安装 和 本地（当前项目）安装; 路径设置好，路径指引（环境变量）设置好了，可以安装依赖包了
步骤，1.通过小黑窗 去到 node安装目录下
2.输入 npm init 不断按确定就行，，，这时会生成一份 packjson。json文件，，这份文件是保存 安装的包的信息的
全局安装：
步骤 npm install -g packName，
提示： 全局安装时没法写入 packjson 里的
一次安装，全部地方能用，但是可能由于 系统变量指引不对，，产生 类似 "webpack 不是内部或外部 可执行命令" 这种，，，所以要根据一二步操作
你会发现，，之前设置的 全局安装路径 node_global 文件夹下 多了这个 安装包的文件夹
本地安装（当前项目文件夹下安装）
就当前项目下 再安装一遍，，产生一个 node_modules 文件夹，把依赖包放到放到项目 A、B、C、D里，
步骤
1. npm install -save-dev webpack
这时你会发现 ，，当前目录下 会 有一个 node_modules 文件夹，，里面多了 个 刚才安装的包，，
提示：
-save ，，可选，会把这个包版本信息保存到 当前目录的 packjson里
-dev，，可选，， 不带 -dev 就是说 这个是 生产工具（说白点就是 到时上线运行时 是否要用到，比如 vue、react）； 带 -dev 会被写入到 packjson 的 devDe 里，即 开发工具，，意思我们做项目时才用到的工具，例如 webpack 这个打包工具， 但是，你全部 不带 -dev 都安装到 depen 里也是可以的
拓展：为什么 全局安装后 还要 本地（给当前项目）安装，，甚至，刚才设置了 node_ptah,, node安装目录下的本地安装 都能产生 全局调用的 效果！
原因一：每个项目，需要的 npm 包不同或者 版本不同，，项目a 需要的 webpack 是 3.0，，项目b 是 4.0，，那么 本地安装后，，，不会在去 node_path指向里查找，，
原因二： 有些 工具 要 本地安装，，，比如 loader之类，，你设置 系统变量也 不起效，不如找不到 css-laoder
提示： 你也可以 packname@3.1.4 安装指定版本号
课外题
一：packjson解释、 安装当前项目所需的包
如果是 修改别人的项目，或团体开发，packjson这个 就必须，不然用了什么包，版本多少大家都不清楚，
步骤：1.把别人那份 packjson。json拷贝到 到要开发的项目目录下，
2.小黑窗cmd也去到 这个目录 ，，输入 npm install，，他会把这个 packjson里写到的 包 安装到 当前这个项目里，
提示：由于 包需要墙，所以一般这种一键命令安装会被卡死的，但是淘宝的 cnpm会有很多 莫名奇妙的 ”鬼“，所以还是对着那packjson一个一个安装， 哈哈哈哈哈
二：至于 webpack种种配置，自己可以摸索，
提示： 最好先不要 webpack4，“extract-text-webpack-plugin”这个插件不支持 用 next版爆一堆bug
说完了，，谢谢大家！
这时都是本人一步一步实验验证的，如果哪里讲得不对，谢谢指出！
给个彩蛋
授人以鱼 不 如 授人以渔
网上能用的配置 webpack.config.js大把，但是用了你也不知道什么意思，想改的时候也不知道改哪里怎么改，不如花个一两天一个一个api 了解一下，自己一步一步配置
网友评论