目录索引
作为一个一心向上的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
如果执行后没有报错,证明安装成功。