说说webpack 安装过程中的那些错误（坑）

安装webpack可谓是心累啊，我花了好几天时间都没安装好，各种报错啊，

什么Please install 'webpack-cli' in addition to webpack itself to use the CLI.

什么-bash: webpack: command not found

还有No such file or directory各种坑我都基本进了一遍

终于，经过不断的卸载重装，总算安装好了一个能用的

本次我安装的版本是1.13.2的，其他版本我不确定是否有效，电脑用了window 和 mac都装好了，过程提示都是一样的，截图有些是win 有些是mac的，不影响结果

 

 

先说说我的安装报错到最后过程

安装前必须先安装node.js

然后因为怕墙，我安装了淘宝npm镜像，后面也是使用cnpm安装的，建议安装下

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

 

首先我也是屁颠屁颠的去看官网的安装文挡

错误提示：

Please install 'webpack-cli' in addition to webpack itself to use the CLI.

-> When using npm: npm install webpack-cli -D

-> When using yarn: yarn add webpack-cli -D

然后有人告诉我 npm i -g webpack-cli -D --save 装了之后查看webpack -v确实能出来版本号，但是，当运行打包的时候就会报错，很长一段

接下来我干脆卸载重装了，

错误提示

command not found

有人说要装低版本然后我npm install --save-dev [email protected] 结果一样

无奈卸载再装，经过一段瞎折腾，

cnpm install webpack -g

提示cli 就

cnpm install webpack-cli -g

 

 

 

webpack -v  出来 4.0.1 惊喜啊，激动啊终于好了，可是打包出错了

版本太高不行，我就直接安装1.13.2的版本，也能出来版本号是1.13.2，可是打包的时候跟上面的报错一样，而且用的是4.0.1的版本打包的

算了，不挣扎了

 

下面看看如何正确的安装1.13.2

第一步：如果有安装报错，最好先卸载 而且最好全局和文件夹内都卸载一遍 

npm uninstall webpack -g   (全局卸载)

确定npm正常 及安装了淘宝镜像

第二步：全局安装 cnpm install -g [email protected](经过测试，其他版本也可以，4.0以上的我就不确定了，貌似4.0的还是测试版)

(2019.11.19 特别更新下)
发现很多新手是上述安装问题都是因为直接npm 安装的最新版4.0以上的，然后按照此文章操作又直接安装成1.13.2版本了，虽然没问题，但是这个版本相对来说还是有点低，我建议还是安装3.0版本的 看了github上3.0最后一个版本应该是3.12.0， 所以
请 cnpm install [email protected]  

另外我个人其实不建议安装cnpm淘宝镜像的，这玩意在以后的开发中会有莫名其妙的问题，当然如果你不能“出墙”，作为新手可以先用着(在这里我就不改命令了)

第三步：进入文件夹 （比如我的项目(pack文件夹) 在桌面 cd Desktop/pack）

第四步：局部安装 cnpm install --save-dev [email protected]

webpack -v 查看显示 1.13.2版本

接下来打包

 

终于成功了

到了这里说明已成正常使用了