day04【项目前端相关基础知识二】/12-尚硅谷-谷粒学院-前端技术-webpack介绍

咱们开始讲，这个叫web pack。那首先第一个给大家说一下这web pack它到底是一个什么东西，或者说它能做什么事情，咱先做个说明，那现在啊，打开我们这个课件中，咱们就找到这个课件叫web派，里边有针对web pack的一段描述啊，咱先快速读一遍，然后给大家解释一下啊，这是什么意思？这里写的说这个web pack是一个前端资源加载打包工具啊，它告诉我们是一个资源的加载和打包工具，它将根据模块的依赖关系进行静态分析，然后将贴模块按照指定的规则生成对应的静态资源。这是他一段官方描述，其实说的通俗点什么意思呢？咱们看我这张图上啊，这里边标注到什么意思呢？就比如我现在啊，我在这个项目中把我写清单中会产生很多的静态资源。

什么叫静态资源呢？比如说大家看啊，我刚才就是在这里边你发现。我是不是写了很多的JS文件呀，包括在里边我还可以写很多的CSS文件，就是咱说那个样式文件，或者说有很多其他的文件，那咱们在操作中，我们用while派可以干什么呢？咱可以把这多个JS文件，或者说多个CS文件，最终给它打包成一个文件，就是在一个文件中包含咱们的所有文件内容，这是它叫we派头的事情，叫一个打包工具啊，给大家大概画一下啊。假如说我现在啊，有这么多文件。我随便写一下，比如说有多个文件。比如我们现在就有三个文件啊，当然有更多，假如三个文件中第一个文件它是这个叫1.js。然后第二文件，比如我们调这个2.gs。

然后第三个文件，比如是一个其类型，假如它是一个叫零一，就是零一.css文件，大家看现在我是不是有三个文件，JJS文件，CS文件，这些都叫静态资源文件，那我现在用web pack可以做什么事情呢？就是web pack。他做的事情就是我们现在通过wepa可以把这三个文件最终怎么做给他，最终就是生成出一个文件，假如说它生成这个文件，比如我们就叫这个啊，随便起个名字，比如我们叫这个result。点JS，我们就生这个文件，而在这个蕊造的宅中，它既包含了1.g中那种，也包含2.gs，也包含了0.css，这文件中这三个内容，它里边全都包含，这是外派做的事情，把你多个静态文件最终打包成一个文件，这叫we派。

我写一下啊，它就是一个打包工具。然后它可以把我们的多个。啊，把多个这个静态。资源稳定。最终打包成。一个文件，比如说我这里边举个例子，当我们有两个GS，一个CSS，用web派之后，这三个文件最终都会在一问件中都包含，就是在result中既有零一又零一，里边有一，里边有二，里边里边内容全都有，这个就是外国派可以做的事情，是一个叫打包工具啊，大家也知道。而咱们就是为什么要这么做呢？给大家强调啊，这web pack呢，一般来讲是我们在开发完成之后，你项目在部署之前要做的事情，那这么做有什么好处呢？我希望各位能想到有什么好处。大家注意啊，如果说我现在我这项目中有很多的这个静态文件，那咱每次操作中这每个文件咱是不是都需要去发送一次请求啊，假如你一需要一次请求，二需要请求零，一是不是需要请求，而我现在把文件都生成一个文件，那我再请求请求一次是不是可以了，不需要你再请求多次，所以这么做的好处是什么？可以减少你页面的请求次数。

因为各位应该都知道，咱们一个页面中，它每个请求肯定都是很耗资源的，所以咱们就是减少它的请求次数，提高页面的访问效率，这是它一个主要作用，外派D就是做这个作用的，打包成一个文件，减少页面的请求次数啊，所以大家把这个作用知道，这个叫web派。这个啊，我们做一个说明。所以说啊，比如说以后面试中别人问到你，你把这个过程，比如别人问你说你用过什么计算技术，你可以说我们用过we派，然后别人说we派是做什么的，你把这个过程给别人说清楚应该就可以了啊，因为这个过程就清楚的讲出来Y派到底是干什么，把do文件打包成一个文件。

啊，这个啊，咱就说完了啊，什么是we派，把概念做一个介绍，然后概念说完之后呢，下面呢，咱就来具体演示一下这个效果，它这过程呢，可以说也是一个固定的步骤，那我就按照这个过程给大家就详细演示一下啊，这一个固定的过程。那这个啊，我先保存一下。