webpack安装教程

强调一点:这些命令复制进cmd窗口可能不被识别,但是命令本身没有错,建议照着手动敲入

1.安装Node.js

webpack基于node.js运行,首先需要安装node.js

下载对应你系统的Node.js版本:点击下载,推荐下载LTS版本

选安装目录进行安装,安装完成检查PATH环境变量是否设置了node.js的路径。

测试:在命令提示符下输入命令node -v,会显示当前node的版本

2 .安装NPM

  1. node.js已经集成了npm工具,在命令提示符输入npm -v 可查看当前npm版本       
  2. 设置包路径:包路径就是npm从远程下载的js包所存放的路径。使用 npm config ls 查询NPM管理包路径(NPM下载的依赖包所存放的路径)
  3. 为了方便对依赖包管理,我们将管理包的路径设置在单独的地方,本教程将安装目录设置在node.js的目录下,创建npm_modules和npm_cache,执行下边的命令:
    npm config set prefix "nodejs安装路径\npm_modules"
    npm config set cache "nodejs安装路径\npm_cache"
    例如:
    npm config set prefix "D:\soft\cstsoft\installplace\nodejs\npm_modules"
    npm config set cache "D:\soft\cstsoft\installplace\nodejs\npm_cache"

    此时再使用 npm config ls 查询NPM管理包路径发现路径已更改

  4. 安装cnpm:npm默认会去国外的镜像去下载js包,在开发中通常我们使用国内镜像,这里我们使用淘宝镜像
    下边我们来安装cnpm,有时我们使用npm下载资源会很慢,所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。
    输入命令,进行全局安装淘宝镜像。

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

    安装后,我们可以使用命令cnpm -v来查看cnpm的版本,注意:要在系统变量path中设置环境变量,环境变量设置为cnpm.cmd文件所在的目录,如图,所以我的环境变量的值为:D:\soft\cstsoft\installplace\nodejs\npm_modules,配置后重新打开cmd窗口

  5. 使用nrm ls 查看镜像指向,使nrm use XXX切换 镜像,如果nrm没有安装则需要进行全局安装:cnpm install -g nrm,nrm ls 查看镜像已经指向taobao

3.安装webpack

全局安装指定版本:npm install webpack@3.6.0 -g或 cnpm install webpack@3.6.0 -g,如图所示,代表安装成功

扩展说明:

1.安装webpack有很多方式,但经过尝试建议用全局安装并且指定版本

2.清除淘宝镜像cnpm:npm uninstall cnpm -g

3.完全卸载webpack:

 在全局下删除    npm  uninstall  webpack  -g

最好将项目目录下的node-modules一起删除,否则会有残留文件影响下一次的结果,找不到就先执行命令,然后卸载nodejs,并且把nodejs整个安装目录删掉吧

4.删除npm之前设置的npm config set prefix...

方法是删除(或者修改)C:\Users\Lenovo\.npmrc这个文件和删除C:\Users\Lenovo\.nrmrc。如果不在这个目录下,就全局搜一下

也有的电脑在C:\Users\Administrator\

.npmrc内容如图所示:

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页