04-尚硅谷-webpack从入门到精通-webpack的初体验

我们来看啊，接下来呢，我们要学习的是这个派的出题。大家呢，第一次去使用一下这个PE这个技术。好，我们打开这个编辑器啊。那么我们来新建个文件夹，叫零二外派出题。对吧，好，那我们要做哪些事情呢？来看啊，首先我们需要打开这个终端。第一步，我们先初始化一个描述文件。好，初始化包描述文件的意义呢，就是我们接下来要下包了啊，做一些初始化它。好，其他的都用默认值。好，初始化之后下方偏白。下两个包，一个是。因为接下来我们要使用的是这个技术。一个叫WiFi杠。啊，它呢是能够帮我们啊，通过这个派C这个包，通过指定，然后去使用派D内部的功能，所以我们需要下载这个C这个包。

网络呢，需要先全局安装。全局就是将来呢，可以作为指令去直接调用这两个东，这两个包啊，直接调用它。那么这里面呢，又涉及到一些MPM的知识啊，大家要知道。下完之后呢，除了要全局安装呢，我们待会儿呢还得本地安装一下啊，这两只呢都要安装。然后呢，有同学问啊，可能你前面之前下载过了对吧，你下载过了再下载一次也没关系，因为全局安装的话呢，它是会把新的包诶覆盖掉，旧的包也说他顺带的会把你的文派的版本呢进行更新的啊所以呢，诶比方说。然后在本地干大写的D啊。这大小D呢，杠大小D的意思就是它会将我们这个PA呢添加到我package dress中的开发依赖啊开发依赖。咱们外pad里面下载所有东西都属于开发一代啊，不属于生产依赖，所以我们都是干D啊干D。

好，那等加于呢，干干save干D大干大写D呢是缩写啊。是简写。好，我们呢，需要做的事是等待它下载完成，那么接下来我们就会写我们真正的测试代码了，好，OK啊，那我们接下来写代码。但是下面的新建个文件夹叫SC。SC代表我们项目的源代码目录。在新文件夹叫表达。必要的代表的是我们代码呢，通过外派处理之后，打包处理之后输出的目录。好，同时打包啊，我们可能需要有个入口文件，有个起点文件，所以我需要一个起点入口文件叫。此文件就是我们的PE的入口起点文件。好了。那么接下来我们要干什么事呢，对吧？我们啊，要去验证一些功能，验证一些功能。

啊，这个功能就是我们我们说啊PE呢，它能处理JS文件和JS文件，所以我们要验证一下它到底能不能处理啊JS和JS文件。好，当前的这个index呢，就是我们的一个文件。好，我们要稍微写点东西。啊，多写那个东西啊，都是比如说第一个方法叫。好，Return一个S加Y。对吧，然后呢，我们简单打印一下啊。OK啊，就写了个基本代码。好了，那怎么验证它到底能不能处理这个文件呢？这时候我们就得有一个运行指令。运行指定呢，它分为开发环境制定和生产环境制定。我们来一个写啊，开发指定的下面的。

干O输出到哪里去呢？得先看必要的。下面的这个表S。通过杠杠mode来指定我们的这个打包环境。整句话意思翻译过来就是派呢。会议。这个典型。为入口文件。开始打包。打包后啊，输出到这个点斜杠，必要的下面的标。啊，住到这儿去。啊，整体打包。是。开放。就这样子。比如说他会使用我们派的默认开发环境去进行打包。所以整体呢，我们可以尝试一下。

对吧，诶输入成功啊，输入成功呢，我们在下面呢，可以看到它输出的一些结果啊，其中哈希值呢，代表的是我们整体的一些内容啊，比如说我们可以把它把一些关键的点复制一下啊。哈希值呢，就是我每次呢输出的一些结果，他每次打包的时候都会生成一个唯一的哈希值，哎，你可以理解为是个唯一的ID。模式呢，就是WiFi的一个版本啊，WiFi版本。Time呢是一个时间，是个时间啊，标准呢，就是打包的一个时间啊，具体时间。啊呢，这下面呢，是个类似于一个表格啊，它们分别是这样一数一数一一对应的一个关系。那么呢，代表资源啊，这代表了我们打包资源呢，叫输出的资源呢叫BS。大小的有44KB左右。它属于哪个创呢？属于创。那么来，他的名字叫name may，叫may啊。

好，下面就没什么重要了啊好，下面这是就是这个资源参与了打包啊S它大小呢，之前是391啊，打包后是4.4.18KB啊，为什么打包之后变得这么大了呢？我们待会看一下这个文件。好，这里面大家需要知道什么呢？需要知道这里有个哈希值，这个哈希值呢，将来我们就会利用上它作为我们文件命名那种方式啊，大家知道有个哈希值就好了。那么我们看一下标下面，下面都会多一个文件啊，叫Bill DS，这里面呢，有一系列东西啊，所以你会发现文件体积大了好多啊。那么前面东西都不用管啊，大家需要看的是下面。下面呢，会有个点斜杠S下面的indexs。这个就代表这是我们打包的这个index文件。其中啊，其中这里面有个函数，诶这个函数里面呢，就包含着我们打包的这个代码了啊，这个码你看上面是注释，后面是我这个方法等。

那么整体呢，就是一个这样的情况，我们使用这个纸巾呢，他就会帮我们去打包啊，帮我们打包。好，那生产环境指令生产环境啊，写错了。它指是什么呢？我们来看一下。就是把这个东西。好，他祭司呢，其实都是一样的，只不过呢，整体打包环境呢，是生产环境。好，我们来看一下它指令啊。回唱。OK，做好我们看构建后的资源，你会发现啊，它呢无非就是多了个压缩啊，多了个压缩好咱们要知道啊，就生产环境呢，它会压缩咱们的JS代码。就这个啊，那么这代码呢，是可以运行的，是可以运行的，如果你会使用node啊，那么其实可以直接在node平台就可以运行了啊，比方说输入指定no的点斜杠，必要的下面的哎，必要。

那么你会发现它输出三，哎，因为我这个JS文件里面呢，就有一个方法一加二，所以输出三这是环境和运行的啊。你也可以在下。然后呢，在这里面写一些基本代码啊。然后呢，把这个JS呢，打包后的资源呢引进来。啊，这里一定要注意啊入的资源。大包子，我们也来预习一下。好，再按F1上。看看啊好，这个错误呢不用管啊，这错误呢指的是这个icon图标找不到啊，所以别管它，这错误呢是正常的啊，是正常的，我们要看的是这三再刷新一次三，诶没问题，是三。所以呢，咱们这个打包后的资源啊，在咱们的啊，是都能正常运行的啊，就是这个。

好吧。那么是这个啊，所以我们这块呢，是没有问题的，没有问题的。好，那么测试完运行指令之后，我们接下来还要验证点啊，这是咱们。他们能打的有，还有，所以我们绍。同时呢，我们说它不能打包样式资源和图片资源，我们都得验证一下。所以我在SC下面新建文件叫。然后这里面写点内容。好，然后呢，Age。18。好写完之后呢，这里面我可以使用。比如。好，然后呢，简单的打印一下啊，简单一下。好，写完之后呢，我们再执行一次打包啊，注意一定要写完代码之后呢，要再执行打包，因为如果你不打包的话呢，它的它的必要的DS，这个打包后的文件是之前上一次的结果，而不是我刚刚修改的结果。

所以我修改代码呢，要重新打包标的JS呢，才能拿到最新的代码，才能看到最新的结果。所以我们按上回一个指啊，按上又回到一个指，我们行这个，比如开发环的包指令。啊，因为生产环境呢，他把代码全压缩了，看不清楚啊，所以我们一起开发。我们再看。往下翻。这时候呢，你会发现他将这个呢，也引进来了啊，也全部引进来了。就是这个啊，所以呢，我们最终呢，要看代码能不能运行呢，最后一个就是在再看一下啊，我们切换到页面，诶，这时候你会发现打印是没有问题的。所以我们回过头来来看啊，咱们这个这里做了哪些事情啊，我们得出个结论。就是WiFi啊。能处理。

然后呢，我们再写一个index，写个样式文件啊index。然后呢，写的样式。白看了。拼。好，我们引进来再打包一次啊，引入样式文件。好，引入样式文件，我们再打包一次，按上键啊。哎，这时候你会发现它爆红了啊，那么爆红了说明外派呢，就爆错了，就说明打包是失败的啊，不要打包失败的，所以大家注意，一旦发现呢，我们这个打包结果我们会拉长一点啊。打包结果的出现了红色的字啊，出现了红色的字，比如说这一块，那么说明啊，我们打包失败了啊，打包失败了，报错了，我们可看这个打包后的资源。啊，当指到这个S文件这里，就发现他报了个错误啊，报了个错误了个异常啊，所以呢，打包失败了。

那么这说明呢，就是它压文件呢，是不能处理的啊。图片资源也不能处理，我就不一个测试。他只能处理呢，Je和资源啊，其他资源呢，是不能处理的，这是我们第一个阶段。对吧。好，第二阶段就是生产环境和开发环境，目前有什么区别？环。就是比。多一个压缩GS代码，其他的呢，目前看不出来啊，就多一个压缩代码，这是一个。那么它本身他们能做什么事呢？诶，比如这里我成第三点啊，它本身生产环境，开发环境能做什么事呢。

他能做什么事呢？他能做的事就是将啊咱们的yes。编译成。浏览器能识别的目的。啊，就是这个啊。所以呢，这是最终的结论，最种结论，通过测试呢，发现它的确能处理J和JA，我们在页面中能够看到结果，那一到样式文件呢，就会报错啊，报错的话呢，我们一刷新，哎，你会发现他也会报这个错，整个的东西就崩溃了。那么那抛开CS资源先不看啊，先抛开CS资源不看，那么生环境和开发环境呢，它都能够对ES模糊化呢，进行编译处理，你看我这儿呢，就使用了E的模糊化。好，我们再变一次。

啊，比如说我这次换一个环境都试一下，都试一下。好编译成功啊，注意是这个代码没有红色错误，没有报错。这时候我们去刷新页面，你看结果是正常的。啊，结果正常的，所以证明这一点呢，它都能够让浏览器能识别的一种方式啊，能够进行编译语法。同时生产环境呢，它输出的资源呢，代码会进行压缩的啊，进行压缩，所以体积呢会比较小。这一点具体多大呢？你可以在这里看到，它大小大概为1KB左右啊，如果不经压缩呢，它大小大概为5KB或者之前的4KB左右。啊，所以这是有很明显的一个区别的。所以这就是我们最终通过使用pad一个自身原本原本的功能就具备这些功能。开发环境的功能和生产环境功能，能够编译model，能够压缩JS代码，哎，这就是我们派的功能。哎，但是我们就会发现他的问题啊，就是不能处理CS和图片。

而我们开发的时候呢，又需要去处理CS资源和图片资源。所以呢，下一章节我们就给大家带来如何使用WiFi去处理这些样式资源，图片等其他资源。好，那我们呢，就讲到这。