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

在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的功能和特点，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！