webpack安装以及环境变量的配置

  今天安装现在前端最火的打包工具webpack可谓是猜了不少坑,网上的资料大都如出一辙,但是我运行的时候都除了问题,最后自己设置环境变量解决,废话少说,让我们进入正文:

  要安装webpack首先要安装npm,npm在node的安装包中已经默认存在,所以我们只需要安装node,安装node去nodejs官网download,然后傻瓜式安装即可,注意自己选择的路径。

  如果在cmd运行框中输入npm -v 显示版本则表示npm已经装好


 注意:有时候安装npm会出现运行完命令后卡住的情况,这时候需要删除  用户/Administrator/下的.npmrc文件即可。

这时候我们开始设置npm的安装目录,我设置的是在D盘下:

npm config set prefix  "D:\nodejs\node_global"

npm config set cache "D:\nodejs\node_cache"

我看到的关于webpack安装的博客中很多都把prefix设置错了,这个要注意

上面一个是设置安装目录,一个是设置缓存安装目录,

安装webpack:npm install webpack -g

安装完成后会显示上面的式样,

这时候webpack会安装都上面我设置的目录下,既 D:\nodejs\node_global的目录下,此时我进入目录下运行webpack是会出现一下问题:


因为我安装的是新版本的webpack,新版本webpack安装的时候必须要webpack-cli,然后我们继续安装:

安装webpack-cli:npm install webpack-cli -g大笑


安装完成后我进入webpack所在的目录运行:

此时在webpack所在的目录下能成功运行,但是当我到最外层进行安装的时候显示webpack不是外部命令

这时候我们设置环境变量,将webpack所在的目录加到path环境变量中,

与之前你所设置的下载目录对应即可,

最后运行结果

:

几个小时过去了,经过这几个小时的安装,也学到了很多,赶快进入下一步的学习咯~大笑



猜你喜欢

转载自blog.csdn.net/hxy19971101/article/details/79558599