webpack血泪史（上）--从安装到放弃

作为一个一心向上的ITer，我本着一定要攻克webpack这个难关的决心，先后经历了从原生npm安装webpack失败、淘宝镜像源安装cnpm、webpack成功后再次编译失败，到成功安装原生npm和webpack，这其中该踩的坑都踩遍了，真的可以说是一部血泪史了TT，本文先介绍一下比较简单易行方法：从淘宝源安装npm和webpack。
提前声明，我的电脑是MacOS，以后有机会的话，可能会研究一下在Windows上安装webpack的各种坑。

---

安装node.js

一般Mac笔记本上会自带一些开发必备的软件或框架，打开terminal终端，命令行输入node -v查看笔记本上是否自带node.js，如果像下图，命令的反馈是一个版本号，证明你的电脑自带了node.js，如果命令运行后反馈不是一个版本号，而是提示没有这个命令，那应该就是你手抖命令输错了，要不然就是电脑没有自带node.js。
还有些小伙伴查看node.js的版本号后发现电脑自带的版本比当前最新版本低很多，可以重新安装最新版的node.js。

访问node.js中文网去下载node.js安装包

Mac系统的小伙伴们直接下载可执行程序.pkg文件就好了，下载完成后双击打开node.js安装器，然后根据提示同意协议、输入管理员密码等一路继续就好啦

这个时候，到终端中输入node -v查看版本号，如果反馈的版本号和你安装的版本号一致，那么恭喜你吖，安装成功啦~
另外，那些嫌弃自带node.js版本低重新安装的小伙伴们应该也发现了，我这里截图中的node.js版本号是v10.16，安装前查看版本号的截图中是v10.15，这证明，我们覆盖安装操作也成功了。

---

安装cnpm

安装好node.js，终于迎来了激动人心的时刻，从此刻开始，我们就要走上被npm和webpack虐的不归路~
打开终端，输入命令：

sudo npm install -g cnpm --registry=http://registry.npm.taobao.org

出现下图的样子，或者没有error报错，即安装成功。嗯，淘宝源的npm还是很丝滑的。

---

安装webpack

安装webpack前，提一下，

• 要保证你的电脑上没有安装webpack和webpack-cli，或已经卸载干净，没有残留（webpack和webpack-cli完全卸载戳这里）
• 安装顺序问题，先安装webpack-cli，再安装webpack，先全局再局部
• 没有package.json文件就无法局部安装webpack-cli和webpack，这种情况可以先全局安装webpack-cli和webpack，然后再按照教程进行init，再局部安装

全新的项目，新建package.json文件

安装好npm后，在你要存放项目的配置文件的目录下执行：

cnpm init -y
#初始化，生成默认package.json文件，不会出现交互式界面

执行完毕后会默认创建一个配置文件package.json，执行过程中提示输入的name、wersion、description等直接enter跳过即可，或者你也可以根据你的需要填写相应内容
截图如下（截图是为了演示后补的，所以命令是npm，大家还要用cnpm哈）

然后在这个目录下（有package.json文件的目录）执行局部安装webpack-cli和webpack就好了

---

已有项目并存在package.json文件

安装webpack-cli

全局安装webpack-cli

全局安装就是在整个电脑环境中安装，打开终端，在主目录下执行命令：

sudo cnpm install webpack-cli -g

出现如下截图，证明安装成功

---

局部安装webpack-cli

局部安装，也就是在项目目录下安装，这个目录中一定要有package.json文件
执行命令：

sudo cnpm install webpack-cli -D

出现如下截图，证明安装成功

---

安装webpack

全局安装webpack

切换到主目录，执行命令：

sudo cnpm install -g webpack

出现如下截图，证明安装成功

---

局部安装webpack

切换到项目目录下（有package.json的那个目录）
执行命令：

sudo cnpm install --save-dev webpack

出现如下截图，证明安装成功

---

检查webpack是否安装成功

到package.json文件中查看依赖引用：
执行下面的命令就可以在终端中打开package.json文件

open -e package.json

如图，我们安装的webpack-cli和webpack都已经被引用

接下来，测试一下webpack是否可用
在项目目录下（有package.json文件的目录）执行：

cnpm run build

如果执行后没有报错，证明安装成功。