为了账号安全,请及时绑定邮箱和手机立即绑定

Webpack及npm介绍安装

标签:
Html5

Webpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包

在这里插入图片描述
从图中我们可以看出,Webpack 可以将js、css、png等多种静态资源 进行打包,使用webpack有什么好处呢?
1、模块化开发
程序员在开发时可以分模块创建不同的js、 css等小文件方便开发,最后使用webpack将这些小文件打包成一个文
件,减少了http的请求次数。
webpack可以实现按需打包,为了避免出现打包文件过大可以打包成多个文件。
2、 编译typescript、ES6等高级js语法
随着前端技术的强大,开发中可以使用javascript的很多高级版本,比如:typescript、ES6等,方便开发,
webpack可以将打包文件转换成浏览器可识别的js语法。
3、CSS预编译
webpack允许在开发中使用Sass 和 Less等原生CSS的扩展技术,通过sass-loader、less-loader将Sass 和 Less的
语法编译成浏览器可识别的css语法。
webpack的缺点:
1、配置有些繁琐
2、文档不丰富

安装Webpack

Webpack基于nodejs运行所以先要先安装node
1.3.2.1 安装Node.js
为什么会有node.js?
传统意义上的 JavaScript 运行在浏览器上,Chrome 使用的 JavaScript 引擎是 V8,Node.js 是一个运行在服务端
的框架,它的底层就使用了 V8 引擎,这样就可以使用javascript去编写一些服务端的程序,这样也就实现了用
javaScript去开发 Apache + PHP 以及 Java Servlet所开发的服务端功能,这样做的好处就是前端和后端都采用
javascript,即开发一份js程序即可以运行在前端也可以运行的服务端,这样比一个应用使用多种语言在开发效率上
要高,不过node.js属于新兴产品,一些公司也在尝试使用node.js完成一些业务领域,node.js基于V8引擎,基于
事件驱动机制,在特定领域性能出色,比如用node.js实现消息推送、状态监控等的业务功能非常合适。
下边我们去安装Node.js:
1、下载对应你系统的Node.js版本:
https://nodejs.org/en/download/
2.也可使用nvm管理node

nvm ls显示所有node版本
nvm install stable/6 指定安装node版本
nvm use 6 使用某个版本 node

2.node ‐v 显示版本

1.3.2.2 安装NPM
1、自动安装NPM
npm全称Node Package Manager,他是node包管理和分发的工具,使用NPM可以对应用的依赖进行管理,NPM
的功能和服务端项目构建工具maven差不多,我们通过npm 可以很方便地下载js库,打包js文件。
node.js已经集成了npm工具,在命令提示符输入 npm -v 可查看当前npm版本

2.设置下载的资源包路径

npm config set prefix "D:\Program Files\nodejs\
npm config set cache "D:\Program Files\nodejs\npm_cache

注意 D:\Program Files\nodejs 到这里就行不要使用D:\Program Files\nodejs\npm_models 无法识别

npm config ls查看npm配置

在这里插入图片描述

3.使用tnpm 国内淘宝镜像提高下载速度

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

cnpm -v 查看下载的版本

在这里插入图片描述
4.安装 nrm 切换镜像

cnpm install -g nrm 安装nrm

nrm ls 显示镜像
nrm use taobao 使用淘宝镜像
在这里插入图片描述
5.安装 webpack
cnpm install -g webpack 安装
查看版本
webpack

在这里插入图片描述

使用Webpack

笔记小结

在这里插入图片描述

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消