脚手架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技术很烂的五个原因分析
Oct 28 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
js数组常用最重要的方法
Feb 04 Javascript
vue实现动态按钮功能
May 13 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
WebPack工具运行原理及入门教程
Dec 02 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
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
HTML的select控件美化
2017/03/27 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
Node.js中DNS模块学习总结
2018/02/28 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
TensorFlow实现创建分类器
2018/02/06 Python
python 内置函数汇总详解
2019/09/16 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
优秀教师事迹简介
2014/02/02 职场文书
团队精神口号
2014/06/06 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
感恩教育主题班会
2015/08/12 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS