webpack打包工具安装webpack

举报
Ustinian_2022 发表于 2022/08/06 20:45:11 2022/08/06
【摘要】 前言:我在b站上面学习Vue的时候需要使用webpack进行模块化,那就安装webpack,老师说由于webpack需要nodejs的支持,所以我们还需安装nodejs,所以我就先安装nodejs,然后在安装webpack小贴士: 该项目配套后端代码已经新鲜出炉》》》点我去看第一步:安装nodejs下载:老师上面nodejs的版本是10.13.0,所以我也安装该版本,在nodejs官网上面是...

前言:

我在b站上面学习Vue的时候需要使用webpack进行模块化,那就安装webpack,老师说由于webpack需要nodejs的支持,所以我们还需安装nodejs,所以我就先安装nodejs,然后在安装webpack

小贴士: 该项目配套后端代码已经新鲜出炉》》》点我去看

第一步:安装nodejs

下载:

老师上面nodejs的版本是10.13.0,所以我也安装该版本,在nodejs官网上面是最新的12.8.4,这不符合我的要求,于是我找到了所有nodejs历史版本的链接(https://nodejs.org/dist/),由于我本次使用的nodejs版本是10.13.0,所以我找到了nodejs v10.13.0所有类型安装文件的链接(https://nodejs.org/dist/v10.13.0/),接下来我找到了node-v10.13.0-x64.msi(.msi格式:Windows installer开发出来的程序安装文件,使用它不用配置环境变量;.zip:解压即可用,但是需要配置环境变量;)的地址是:https://nodejs.org/dist/v10.13.0/node-v10.13.0-x64.msi,你点击就可以下载了,由于下载速度很快,我就不给你提供安装包了

安装:

双击下载的node-v10.13.0-x64.msi,点击Next:

在这里插入图片描述
更改你认为合适的nodejs安装路径:

在这里插入图片描述

点击Next:

在这里插入图片描述
其中:

npm package manager表示npm包管理器

online documentation shortcuts 在线文档快捷方式

Add to PATH添加node安装路径到环境变量

这就是我们使用.msi类型的文件安装的时候不需要添加环境变量的原因。

然后是否勾选必要的工具去编译native模块:

在这里插入图片描述

点击install:

在这里插入图片描述
安装完成后关闭安装窗口,由于我们使用的是.msi类型文件安装的,所以不需要配置环境变量

检查安装:

打开DOS命令窗口,输入node -v,如何你可以看到版本号10.13.0,说明你就安装成功了

更改成淘宝镜像:

如果不更改淘宝镜像,你如果通过npm去安装webpack,那页面直接就不会动了,你就不要去试了,所以更换成淘宝的源很有必要:直接在DOS窗口中输入:npm config set registry https://registry.npm.taobao.org,点击回车就更换成功了,可以通过npm config get registry命令去查看镜像是否更换成功,如果返回的是https://registry.npm.taobao.org/,那说明你已经更换成功了

第二步:全局安装webpack

安装webpack:

在DOS命令窗口中输入npm install webpack@3.6.0 -g 安装webpack,其中的-g代表webpack的全局安装方式,那么我们可以在电脑上任意一个终端上面执行webpack指令,安装可能稍微有点慢,估计要3~5分钟,稍等一下,别去关闭窗口,之后出现让你可以输入的命令行说明你就安装完成了,如下图:

在这里插入图片描述
检查安装结果:

在DOS命令窗口输入webpack --version(注意:两个横线),如果你看到3.6.0,说明你已经成功安装了webpack3.6.0

需要注意:

打开webstorm的时候请使用管理员身份打开,否则在使用webstorm的时候会出现:Unable to save settings: Failed to save settings. Please restart WebStorm错误,你可以在webstorm图标上单击右键——》属性——》右下角的高级——》选择用管理员身份运行——》确定——》应用——》继续——》确定就完成了默认以管理员身份运行webstrom的操作了

第三步:局部安装webpack

上面是全局安装webpack,你可能会想既然已经全局安装了webpack,那为什么还要局部安装呢,这是因为我们需要的项目可能是从网上下载下来的,项目中使用的webpack和我们本地的webpack可能版本不同,这就需要在局部安装webpack了,不过在此之前需要先生成package.json文件,这需要使用npm init命令,当然在此之前你肯定已经做好了全部的准备,我这里用到的工具是webstrom,在webstrom中的Terminal终端中输入npm install webpack@3.6.0 --save-dev就可以了,其中--save-dev的作用就是在开发时依赖,在项目打包后不会在继续使用的

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。