01. 尚硅谷_自动化构建工具webpack_入门介绍.avi原创

来，咱们开始上课。咱们今天上午的任务呢，就是要学一下，诶，第三个自动化构建工具又叫webpa，嗯，首先呢，大家看一下这个教程里面，我先说一下啊，我这放了两个PA的教程。你看我这一个是不标了，一个三一个没有没有标的，这个是webpack一点几的教程啊，我一会带给就是一会发给你们下来，感兴趣的同学可以看一下，我们现在要学的是VAPA3是最新的。为什么这两个都发给大家呢？是因为哎，Ipad现在有一点几的。其实它一共有几个版本，可是说一下有二点几的，还有三点几，而二点几和三点几的啊，用法其实是一样的，三点几也就是它和二点几首先隔的时间特别近，然后呢，是在二点几的基础上又去更加更新了一些功能。而还有一个一点几啊，现在也有公司在用，也有公司在用啊，为什么要强调这两个呢？是因为这两个版本里面有一些小的属性配置不一样啊，但是核心思想一样的啊，配置不一样，那这个时候呢，哎，当然把这两个教程拿着咱们学三点几，当然了，如果说你学完三点几，一点几对于你们来说不是什么难事。

哎，我是怕什么，你们上班以后，哎，你们公司可能会有一点几，到时候把这个教程看一看，哎，再结合着它的官网看一看，更好一点，能懂吧，啊我而且我强调一个事情，如果说你们上班了，你们公司用的是一点几的，那么你就不要用三点几，因为他俩互相不兼容，也不说不兼容，里面有些属性不一样啊，你嵌套着用的话，必然会出错。必然会出错。嗯。我们先把他的这个官网打开。来我这边呢，一个是vapa的啊，它的一个英文的官网，我这儿呢，还有一个是它的中文的文档啊，一个是英文的，一个是中文的。

啊，我们就看中文的就行了，好，那么这呢是它的一个，嗯。主页也是官网的主页啊，在这个主页里边，我们来看一下都有哪些内容，首先中间这一个话白要这是构建你的，这其实有有点像龙波你看。一直在变，哎，从HTML1直到后边啊，Script CSS这些呢，表示构建你项目里面的所有资源。看一下下边这个图，这是一个大的板块，哎，这是一个大的板块，中间这有一个箭头。哎，上边就是这句话，构建你的资源，那箭头的左边大家看一下，哎，这里边呢，有很多我们哎熟悉的一些静态的资源，而这些资源它是不是都有一些箭头指向。

你看他的出发点是从哪儿呢？从GS这一块对吧？哎，当然了，这个CS它预编译语言其实不算出发点，而我们最常用的是GS，哎，这是我们哎象限的时候要用的，那么从这有哎不同的箭头指向，哎，你乍一看它像迷宫一样，那在这你看下面有一句话啊，Modules with dependencies，这是什么意思呢？首先，Modus是模块的意思。With depend depend是依赖的意思啊。也就是说，模块之间的互相依赖关系。那这个时候我给大家看一个啊，看一个你比如说这不是有GS文件吗？或者说是啊，这有CSS文件，你看CSS文件最终是不是指向了一个机，就指向一个图片。

那这个时候我们说一下他俩的依赖关系，谁依赖于谁啊？你结合着咱们之前的认识。是CSS会依赖于图片呢？还是图片依赖于CSS呢？大家都说图片依赖于CSS。你想我就有一个图片，我就放在这儿，我不设定任何的样式，我还是这个图片。而你的CSS里面，你有时候要做一个操作。你得引入一张图片，那这个时候我是不是离不开这个图片啊？哎，这样说的话是CSS要依赖于这个图片，也就是说我箭头指向的东西是我要依赖的东西。那这个时候我们从头来看出发点什么GS，然后各种绕啊，也就是说我在GS文件里边要去依赖各种各样的文件。

包括图片。那还有一个，你看我在GS里面还要依赖于CSS，哎，这一点就比较有意思。也就是说它最终在GS里面要涉及到CSS，要涉及到image啊。这就是他的特点，其实我们以前没没有这样讲过。在GS里面，哎，放CSS放图片。然后这是静态的资源。我们通通过中间这个BY要，哎，就是打包你的资源，最终借口指向这边，大家看下面也有一行字叫static static什么意思。哎，很好，在他这表示是静态的资源，静态的资源有哪些呢？CSCSSGPSPG，而这些东西是我们最终要打包去上线的东西。

也就是说我backpack通过对左边这些模块进行作用，然后去构建，最终生成竞赛资源打包上线。那在PA里边是不是多了一个modules，就模块的概念？模块的概念。在我们昨天学的内容中，我一直说grant。GAP，它叫项目构建工具。Onepa也是项目构建工具的一种，记住了，但onepa又叫模块打包器，BYB是打包的意思吗？模块打包器？啊，在他这样的多了一个模块化的概念，那我就先讲一下webpack的一些特点，在webpack的世界里，他认为所有的文件都是模块。记住了，它多了一个模块的概念，也就是要结合着我们之前学的模块化的概念而去使用它。

而我在ground和里面有提到模块吗？没有。我刚说了，Ipad认为所有的文件都是模块，但是一个除外，大家看一下这里边我们最常用的哪个没有。哪个没有？哎，对，咱平时GS也有了，CSS也有了，唯独是不是没有一个家伙叫HTML。在VT世界里，他认为HTML不算模块，他认为HTML本来就是应该，你上来就应应该有个结构。你看这是它的特点。然后呢，我们重点要去参考的是，呃，这边有个文档。文档里面你可以看一下这句话。哎，这不是模块打包器吗？哎，这是lapa，然后呢，我们主要是看一下这。它里面有四个核心的概念。入口。

输出loader知道什么意思不？加载器还有对应的插件，这个插件哎，我先说一下，就是和我们ground杠一样，可以去帮你呃去扩展一些功能，而这个loader是什么意思呢？为什么要有它呢？那是因为虽然说web pack认为所有的文件都是模块，但是它本身只能加载GS和。节省模块。这些模块记住了，说的是文件，说的是文件。你说本身只能去读这些文件，如果说你是CSS的文件，One PM直接读取不了。他得需要下载一个对应的loader去帮你去加载这些loader，其实说白了还是一个JS库。还是有GS。哎，图片也是，你除了JS和杰森，其他的都得下载logo。哎，这我就说一下三点几和一点几的区别，我刚提到了ipad本身只能加个GS和GS。

而在我们一点几的PA中，它本身只能加载GS，杰森都得需要load。嗯，这是WEPA3里面去扩去扩展的功能。那么我们看这这不是有load吗？哎，那你想看loads就点击一下它，大家看b loader，什么coffee loader CSS loader看到没有，哎，这些就是我们对应要去下载，而这边插件呢也有一个列表，哎，插件呢也有一个列表。这个网速稍微有点。们啊这呢，就是对应的插件，你去用哪个插件啊，你都可以去打开它去看一下，里面都有详细的教程，我找一下，比如说我们这个马上啊要去用它，这不是告诉你如何去安装，基本用法配置都有。都有啊，咱们看这个重点看这个啊指南就行了，你看英文文档里面，指南这对应的写了一个叫god。

也叫指南的意思啊，他这个就是根据那个英文那个官网翻译过来的，所有东西都是从这翻译过来的。那看完这些以后，我们再强调一下，刚才他说的那个四个重点是什么呢。入口输出load什么插件啊，哎这四个，哎四个好，那知道了这些东西以后，哎，我们呢，来到onepad这个教程里面先看一下。这些呢，其实刚才给大家说过了，Vapa是一个模块打包器啊，然后理解loader，这不是我也给大家列出来了吗？它本身是不是只能加载JS和JS，哎，只能加载JS，要加载其他的模块，哎，你就需要对应的load。现在你们脑子里应该有个模块的概念，模块我们之前是不是针对的是GS文件啊，而现在他认为是不是集合所有的文件都叫模块图了个HT吗？

那也就你要把其他的知识思想全部转换到GS，和GS那些概念是一样的模块化。哎，这有个配置文件，我们先不去管它，这个配置文件其实就是和还有GAP里面的那个groundfi和gafi是一样的，是一样的插件，就是可以插件是用来干嘛的呢？它可以完成一些loader不能完成的功能是loader只能是去加载哎文件。啊，学习文档，你们接下来需要访问的地址是不是我发给你们的里面都有，打完了粘这个地址就OK，好，那我们先去干一点活，在work下面，这不是有个wipe是空的吗？

来，我先去创建一个杰森。在这里面它应该是有个对象，这有个name来一个。PA杠。Test，那么接下来呢，我来ver1.0.0啊，先把基本的写好。写完这些以后呢，下面，哎，你们到时候要去安装的东西有这些。首先需要大家去全局安装一个mappa，然后呢，这是不是在局部安装一个。权限的，我肯定安过了。为什么要全局安完，在局部安满，我先提一下啊。我们之前说过，Pad一点几和三点几的用法是不一样的。假如说大家学完以后，你们电脑上很有可能装的是三点几。那你上班了，如果是要请你带着电脑去。那那个时候呢，你把你公司的项目放到你的电脑上，你发现你们公司的项目用ipad，然后你一想，哎呀，反正我也全局安过，我就直接用。

哎，到时候判的是你们公司之前的项目派的配置是用的一点几。那这样的话，你使用的VIP是不是你全局的三点几啊，和他项目里面这个不兼容。这个时候哎，为了安全，你应该是在你当前的项目里面，根据项目的配置去下载一个一点几。你怎么知道项目里面下载是哪个呢，看哪。是不是看看他的杰森啊，哎。