相思资源网 Design By www.200059.com

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的作用和特点,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
vue-cli,webpack

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“脚手架vue-cli工程webpack的作用和特点”

暂无脚手架vue-cli工程webpack的作用和特点的评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。