脚手架vue-cli工程webpack的作用和特点


Posted in Javascript onSeptember 29, 2018

Vue项目开发过程中,会因为很多不同的实际运用需求不断地对webpack配置进行修改,在此之前,我们需要对webpack有一个基本的认识,了解它到底能为我们做些什么

webpack是一个模块打包的工具,它的作用是把互相依赖的模块处理成静态资源,如下图所示。.

脚手架vue-cli工程webpack的作用和特点

webpack的作用:

●把依赖树按需分割;

●把初始加载时间控制在较低的水平;

●每个静态资源都应该成为一个模块;

●能把第三方库集成到项目里成为一个模块;

●能定制模块打包器的每个部分;

●能适用于大型项目。

webpack的特点:

●    代码分割

在webpack的依赖树里有两种类型的依赖:同步依赖和异步依赖。异步依赖会成为一个代码分割点,并且组成一个新的代码块。在代码块组成的树被优化之后,每个代码块都会保存在一个单独的文件里。

●加载器

webpack原生是只能处理JavaScript的,而加载器的作用是把其他的代码转换成JavaScript代码,这样一来所有种类的代码都能组成一个模块,也就是说,我们可以在代码内通过import将webpack打包的资源以模块的方式引入到程序中。

以下是Vue项目中常用到的加载器(它们都是以NPM库形式提供的):

vue-loader——用于加载与编译*.vue文件;

vue-style-loader——用于加载*.vue文件中的样式;

style-loader——用于将样式直接插入到页面的<style>内;

css-loader——用于加载*.css样式表文件;

less-loader——用于编译与加载*.less文件(需要依赖于less库);

babel-loader——用于将ES6编译成为浏览器兼容的ES5;

file-loader——用于直接加载文件;

url-loader——用于加载URL指定的文件,多用于字体与图片的加载;

json-loader——用于加载*.json文件为JS实例。

●  智能解析

webpack的智能解析器能处理几乎所有的第三方库,它甚至允许依赖里出现这样的表达式:

require("./components/"+ name + ".vue")

这一点恰恰是browserify不能做到的。

它能处理大多数的模块系统,比如说CommonJS和AMD。

●插件系统

webpack有丰富的插件系统,大多数内部的功能都是基于这个插件系统的。这也使得我们可以定制webpack,把它打造成能满足我们需求的工具,并且把自己做的插件开源出去。

总结

以上所述是小编给大家介绍的vue-cli工程webpack的作用和特点,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 #Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 #Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 #Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 #Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 #Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 #Javascript
对vue中v-if的常见使用方法详解
Sep 28 #Javascript
You might like
PHP远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
Javascript 入门基础学习
2010/03/10 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
js利用拖放实现添加删除
2020/08/27 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
python基础教程之udp端口扫描
2014/02/10 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
解析Python的缩进规则的使用
2019/01/16 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python修改文件内容的3种方法详解
2019/11/15 Python
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
酒店个人求职信范文
2014/01/25 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
中学生打架检讨书
2014/10/13 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
「月刊Action」2022年5月号封面公开
2022/03/21 日漫
Pandas数据结构之Series的使用
2022/03/31 Python