手机版

脚手架项目网络包的功能和特点

时间:2021-08-29 来源:互联网 编辑:宝哥软件园 浏览:

在Vue项目的开发过程中,由于许多不同的实际应用需求,webpack的配置会不断修改。在此之前,我们需要对webpack有一个基本的了解,知道它能为我们做什么。

Webpack是一个模块打包工具,其功能是将相互依赖的模块处理成静态资源,如下图所示。

webpack的作用:

根据需要划分依赖树;

将初始加载时间控制在较低水平;

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

能够将第三方库集成到项目中,成为模块;

模块打包机各部分可定制;

可应用于大型项目。

webpack的功能:

低代码分段

webpack的依赖关系树中有两种类型的依赖关系:同步依赖关系和异步依赖关系。异步依赖将成为一个代码分割点,形成一个新的代码块。代码块树优化后,每个代码块将保存在一个单独的文件中。

装载机

Webpack只能原生处理JavaScript,loader的功能是将其他代码转换成JavaScript代码,这样各种代码就可以组成一个模块,也就是说我们可以在代码内部将webpack打包的资源以模块化的方式导入到程序中。

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

Vue-loader——用于加载和编译*。vue文件。

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

Style-loader——用于将样式直接插入页面的样式中;

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

Less-loader——用于编译和加载*。更少的文件(取决于更少的库);

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

文件加载器——用于直接加载文件。

Url-loader——用于加载Url指定的文件,多用于加载字体和图片;

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

智能分析

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

要求('。/components/“name”。vue’)

这正是browserify不能做的。

它可以处理大多数模块化系统,如CommonJS和AMD。

低插件系统

Webpack有丰富的插件系统,其内部大部分功能都是基于这个插件系统。这也让我们可以定制webpack,使它成为一个能够满足我们需求的工具,并开源我们自己的插件。

摘要

以上就是边肖介绍的vue-cli项目的webpack的功能和特点,希望对大家有所帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!

版权声明:脚手架项目网络包的功能和特点是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。