微信扫一扫 分享朋友圈

已有 1165 人浏览分享

开启左侧

webpack安装配置教程

[复制链接]
1165 0
1.安装node.js
去node.js官网(https://nodejs.org/en/)下载LTS稳定版本,一路傻瓜式安装(具体步骤另行查阅,此处不详述)。安装完成后在cmd界面输入node -v,如果能出现版本号,代表安装成功。
image.png
2.配置
找到安装node.js的地址,里面会有node_cache和node_global两个文件。如果没有的话,创建这两个文件夹,然后在cmd中执行npm config set cache “D:\nodejs\node_cache”(此处替换成你本机中node_cache文件夹的地址),再执行npm config set prefix “D:\nodejs\node_global”(此处替换成你本机中node_global文件夹的地址)。

image.png
3.安装Webpack
此处采用全局安装的方式,在cmd中输入npm install webpack -g,安装最新的Webpack版本。
4.配置环境变量
搜索环境变量,得到如图的结果

image.png
image.png
在用户变量中添加node_global的路径,我的是“C:\Program Files\nodejs\node_global”。
再在系统变量中新建一个NODE_PATH 并添加node_global的路径。
5.安装Webpack-cli
在webpack3中,webpack与webpack-cli是绑定的。也就是你使用"npm i webpack -g"安装了webpack以后,webpack-cli是默认就安装上了。
  但是到了webpack4,这2个东西已经被分解成了2个完全独立的包,所以,你还需要独立安装webpack-cli。
在cmd中执行npm i webpack-cli -g进行全局安装, 输入webpack -v,出现版本号代表安装成功。

image.png
打开VSCode,输入webpack -v,也能成功显示版本号,此时可以在VSCode中使用webpack了

免责声明:
1,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

56

主题
热度排行
回复排行
最新贴子

Archiver|手机版|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2024-10-6 02:26 , Gzip On, MemCached On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。