02. 尚硅谷_自动化构建工具webpack_打包js,json文件.avi原创

我们先去干一点活，在work下面，这不是有个是空的吗？来，我先去创建一个杰森。在这里面它应该是有个对象，这有个name来一个。Vape杠。Test，那么接下来呢，我来ver1.0.0啊，先把基本的写好。写完这些以后呢，下面，哎，你们到时候要去安装的东西有这些。首先需要大家去全局安装一个PA，然后呢，这是不是在局部安装一个。全行的，我肯定安过了。为什么要全局安完，在局部安满，我先提一下啊。我们之前说过，Pad一点几和三点几的用法是不一样的。假如说大家学完以后，你们电脑上很有可能装的是三点几。

那你上班了，如果是邀请你带着电脑去。那那个时候呢，你把你公司的项目放到你的电脑上，你发现你们公司的项目用ipad，然后你一想，哎呀，反正我也全局安过，我就直接用。哎，到时候判的是你们公司之前的项目派的配置是用的一点几。那这样的话，你使用的VIP是不是你全局的三点几啊，和他项目里面这个不兼容。这个时候哎，为了安全，你应该是在你当前的项目里面，根据项目的配置去下载一个一点几。你怎么知道项目里面下载是哪个呢，看哪。啊。是不是看看他的杰森啊，哎，好。我呢先去在咱们当前的项目里面去下载一个。让他下载的吧，我呢这个VP这个比较大啊，要比ground和GAP那个要大，那这个时候呢，我先去在这去创建一个src文件，然后呢，我在这个下边整一个GS文件。

在这个下边，我去创建一个哎，GS文件，这把形象一点，我故意给他起一个叫tri GS啊，然后呢，我去哎在这写点东西，document.right你比如说哎。Intri GS is a。我叫正在工作啊。写完了，写完了以后，咱们就是只能等他下载完。那下载完了，咱们到拍拍监测里边看一下，大家看这个版本是三点几的吧，啊如果说你要下载一点几的怎么办呢。

下载一点几个怎么办？那个时候就是NM，然后一个一懂，这边要加空格一好。下载下来以后，那这个时候我在我的项目里面就多了一个命令，就叫web pack。就叫webpack，那这个时候哎，你什么都不要敲，你敲一个webpa，首先它没有提示你既不是内部命令，又不是外部命令，说明我是不是有有这个命令啊。好，那这个时候大家看着我可以通过wepa就去构建我的任务了，现在这是不是有个GS文件啊，那这个时候vpa有一个特点，你用onepe命令啊，然后加一个空格。再写写什么，你要去打包的原文件，我去找一下它SRCGS下边的应该是in GS，这没问题吧。

注意啊，现在是不是只有一个文件啊，所以我是不是直接找到它，什么叫呢。通常是不是表示的是。入口的意思啊，然后找到原文件，你就可以对它进行打包，再加一个空格，后边就可以指定你输出的文件目录以及。文件名字。Dis的下边，我这样写是给他创建了两层目录，也说在我当前的项目下边，我要去创建一个Dis的文件夹，在它的下面呢，还有一个GS文件夹，再往下是不是要写我的文件名字啊，我给它起一个b.GS起什么名字都可以，大家能懂吧？接下来我去回车一下，你会发现，哎，它执行了，先来看结果，我去点击一下，这这是不是多了个Dis文件啊，那这个时候是不是有个他。

好，你。为了先验证一下，我在第一次的下面注意了，我在第的下面去创建个index.html，就是和GS是同一目录嘛，那这个时候我可以引入一下啊，GS下面的点GS我呢打开你会发现它正常运行了。我刚不是写了个document right吗？那我们现在来看一下，它下边都给我们提供了哪些信息啊。Time是当前打包所花费的时间。表示的是静态资源。就是对应我们官网，官网上箭头指向啊，右侧这下边是不是说了一个叫呃，A sense a static as sense静态资源嘛。我们生成的是GS，你看大小多少？

2.51KB吧，好，2.51KB，然后出X模块，这离我们先不去管它，大家看这个，这出name就和这个是对应的，这叫主模块。那叫命好，关键是你看下边这，这是不是有个零。这个零是哪来的呢？你可以看一下它构建完了，待会儿我先说一下这个，这是不是原文件。原文件除以原文件是多大？知道什么东西不？38个字节，而你看我原文件是38个字节，我打包完是2.51KB，请问哪个大？1KB等于多少字？这个要知道啊。1024字节一个字节等于多少位啊？等于八位，哎，再往上的单位换算什么都是以1024的级别去换啊，这也就是为什么程序员的节日是10月24号，就是它。

只不过是程序员自己给自己起的节日啊，因为他你普通人的眼里很有可能是十进制，进100进一天，程序员的眼里眼里就是1024，知道吧。来，那我们来看一下它本来我才38字节，你为什么打包完还大了呢？打开这个构建完的，你会发现有很多东西。那么这个东西呢，其实你看一下啊，大家看我选中这个括号，我找一下下边和它对应的，你看是不是在这儿。而它后边又加个小括号调用，看到没有，那说明它这个东西是个什么东西啊。是立即执行函数吧。这没问题吧，好，那么在这个里边，这些东西都是外派内置的一些处理函数。

哎，刚刚我们在这是不是看到有个零，这个零我告诉大家是哪。立即执行函数，函数题里面的内容，我们不去关心它，你看这个在这儿去调用的时候，哎，去调用的时候这，哎其实调的时候船的参数整体是一个什么。数组，而在这个数组里边，我去放置了一个函数，你看这有个零。这个其实是标识，当前他在我传入行参也是放置数组里面的下标。因为我现在intra是直接和vpa打交道的，他认为是主模块，主模块对应的下边都是零。那现在为什么只有一个呢？是因为我只有一个文件，当你的文件越来越多的时候，你就要想我们的模块化的概念，模块化里边，我最终所有的文件是不是都汇集到主模块啊？当你汇集到主模块，我上来先去加载主模块，当我往下解析，发现要引入其他的模块，那么我会立马再去传一个参数。

啊，方式这个函数里面要处理的就是当前要加载的那个其他地方汇聚过来的模块。进而我会给他标一个下标，从一开始递增。啊，有几个我增增加几。啊，一个一个去加啊。好，那这呢一个文件我们看不出来，那接下来呢，我就再去创建一个文件，这一把呢，我给他起个叫master GS。然后呢，在这个里边大家看一下，我这直接用个xbo的function fo，我用的是什么语法。这是不ES6里面暴露模块的语法啊，现在给大家说一下，我PA内置支持ES6 common g AMD这三种模块化规范。

其实你也不用记，只要说到模块，就像咱们说的重要的三种，你会发现不知持没有谁啊。就是我和大家说那种是不不是不是太重要那一种啊，也就除了那一种，这三种都支持，那这个时候再和大家说一个事情，在we pack一点几里边不支持ES6，也是他想要ES6你得去干嘛。先用BA转化为一，五能懂不？哎，这都是三的一个身体，那在这呢，我让他去return一个X乘以X。那这个时候你是不是得这去申明行三。好，那我还可以再去复制一份，我就直接在这下面写吧，Xport来一个function，这一把呢来个半，这也让它传个X，那这一把我去一个X。还记得这个运算符吗？

这叫指数运算符，又叫幂。呃，就几次方。没问题吧，好，现在这儿有个模块了，那么我你既然你是模块化的概念，最终都要汇集到主模块。主模块在我们这意味着最终要和one pack直接打交道。那个模块。你想WiFi在构建的时候，是不会去分别构建你这些模块的，它是不是只需要去打包一下组合块就OK了。好。来，那么要用那些模块，我们第一步是不是应该先引入进来？Input，这没问题吧，注意我刚刚使用暴露模块的方式，这我们之前讲过，这叫哪种方式？这叫分别暴露，它是常规暴露的一种方式吧，那么这个时候我们引入的时候，是不是得用对象解构赋值的形式去引入它？

然后呢，去from当前路径下的ma.GS没问题，那接下来哎，我就可以去使用它，你比如说我在这查个fo，调用来一个三。接下来我让他去拼一个串，这个串里边我不用它，我拿一个字。第二是干嘛的？换行，那在这呢来一个半，哎，再加一个换行，这没问题吧，然后呢，我可以让他在这儿也去加一个什么。B2。那这个时候引引是引入了，然后我们也去作用了，你现在刷新页面肯定是没有的。因为这是不是还是引入到我们打包以后那个文件，那这个时候你只需要重新去打包一次。我这儿用不用改。用不用改？不用我一再强调他是不是打包主模块就行了。

来回车。先给大家看一下这吧，你看这一把是不是多了个一。一是下标为一，你看它对应的文件是不是就是咱们刚刚引入那个ma.GS啊。哎，那这个时候你再先去看一下它的bad GS，哎，结合着我刚才说的，刚刚这个数组里边这个函数，哎是否为零呢。然后他发现是不是我又有个import引入了一个模块在这，这不引入一个模块吗？那么它下边这是不是又多了一个函数，而这个函数里面处理逻辑就是你的引入的那个master GS那个模块。好，看完这些以后，构建演完了，我们来到页面，你去刷新一下。这是不是就出来了三乘以三三的三次方，这没问题吧？那其实你GS文件再多，一样的道理，只要说你学过模块化，会保如一就行，最终你看啊，我们用vapa的特点，最终是不是打包生成一个文件了。

那这个时候有一个好处，就是你开发的时候不管有多少文件。我最终上线的时候我只有一个，那么这个时候我发请求的话是只发一次。哎，这是它的好处，那这呢就是诶打包这个GS，那GS这一块没问题了，大家看一下我在加载GS文件的时候有用到什么load吗。没有吧，那接下来我们再去创建一个文件，我刚刚说了，它除了能加载GS，还能加载什么？是不是杰森，那我来个贝塔这个文件夹在这个下边，我给他来一个，我test杰森，这没问题吧。自己写一个吧，来一个name，比如说来一个科比。

接下来呢，哎，来一个A减，我们来一个39。现在我是不是有一个杰森的文件啊。你接着的文件现在也是一个模块。那么这个时候我就要去汇集到哪主模块来，我去引入一下它port一个data，注意引入角色这些你。就好像默认暴露一样，你也没有办法去解构复制它，所以呢，直接定一个变量去接收一下上一题下面的贝塔，下面的诶，我们叫杰森。这里有一个小细节。当我引入GS文件的时候，后缀名是不自动就省略了，其他的文件不会，那么拿到这个data了，我是不是有可能就我可以去输出一下他来，我就把data放到这，这可以吧。好，这个时候呢，我们需要重新去构建一次，重新去打包。又多了一个，这到现在大家应该能理解它这个原理，没问题吧？好，那这个时候来刷新一下，你们看到的是这个，那请问我拿到的是什么数据类型。

阶层对象。我这是不是直接在页面输出了个data塔，而这个data塔是不是咱们已入进来的，但是咱们很明显看到页面是不是object塔，这个还记得在安拉检测我和大家说过吗？你如果在页面上直接去输出一个对象的话，肯定是这样。还有咱们讲的深度克隆的时候也有它。那你说你现在的阶层是一个什么？如果说大家说是杰森的字符串的话，那么我输出肯定没问题，因为它本质是字符串。实在想不到你可以干嘛，你去利用type of，我是不是能打一下这个。懂我的意思吗？那这个时候来重新构建，然后我去刷新一下，你那检查看一下这是什么东西啊。

是个对象。那说明什么？当你a pod去引入个GS文件的时候，它自动帮你转化成对应的原生GS的对象或者数组了。懂我的意思吗？那这个时候想要在页面输出正常的这个显示的话，你应该是接点string再给他转回去。他这样转是很正常的，是因为我们实际当中拿到数据肯定是手动转化为对象，然后通过对象点属性啊，方法是去拿里面的数据啊，我们现在只是想在页面输出，那我再给他转回去。LA。重新构建，然后呢，我去刷新，这不就是我们要的那个数据吗。哎，那这样的话，我再问大家一下，我在加载接模块的时候有用到什么load吗？

没有，到现在为止，哎，咱们证明了一个事情，它本身是否可以去加载。GS以及杰森的模块。没问题，我呢先把这个视频停一下。