39-尚硅谷-webpack从入门到精通-webpack5介绍和使用

在2019年年初的时候啊，外派团队呢，他就推出了一个计划，要更新一个，发布一个外派五的版本。那么距今2020年已经过去将近一年了，那么我们来看看他究竟完成的怎么样呢？我们打开官网啊，打开this up搜索PE，可在这能看到呢，WEPA5的一个工作进度啊，目前呢，完成了71%了。这一年下来呢，他们陆陆续续前前后后呢，一共完成了7%的工作量。那么在未来呢，很可能就要发布了啊，所以呢，一旦发布啊，我们呢，就得学习这个外派五。那么我们不等他发布，我们现在呢，就来提前学习这个外派五工具，诶，它到底呀，和IFI4又怎么样。它带来怎样的新特点，诶，又带来怎样的一些新的优化。那好，那我们带着这些问题一起来领略这个的一个风采。好，我们关掉啊，我们来到我们的Vs code，接下来呢，我们来看的使用。

好，这里面呢，我们啊先创建两个文件夹啊，一个叫派四，一个叫FI5，我们来对比一下四和派五使用起来有什么区别啊。我们先以WIFI4为例来看一下效果啊，我们在这里新建，先去下包啊，我们先把WIFI4的包下好。哎，在终端中打开。我们的初始化啊，PM。啊，就说排热。然后呢，下载一下我们的pad。感啊，当然呢，还有派C啊，一起下一下。好，你直接下载的话呢，下载的是WIFI4的版本啊，注意下载WIFI4。好。那么下完之后呢，我们待会呢，就会去新建一些内容了啊，我新建一个配置文件。OK，待会儿呢，我们就在这里完成我们IPAD4的一些基本配置啊。

好，那么我们稍等一下，等他下完。OK，写完了，那我们来写配置啊，外派四的配置，那PAD4的配置呢，直接向外暴露出去。有个对象，对象里面呢，写上我们的一些基本内容啊ENT对吧，咱们典型的C下面的JS。好，那么还有一个output决定输出的路径，比方说file name输出的文件名啊，比如说叫。我们呢，就根据这个名字去命名names，你创的name，创name是什么就是什么。好，还有一个pass啊，通过方法呢，拼成一个路径啊，比如我们输出到下面。好了啊，那么这个方法呢，我们需要引入进来啊。等于pass模块。OK。写错了。好了，那么接下来呢，我们再调一下模式啊，模式为development开发模式啊。

好像load啊，咱们的一些plugins啊，我们就不写了，其他配置呢，我们也不加了啊，那么到这我们就写成了一个非常非常最最基础的一个配置。他呢，就仅能够打包JS代码而已。好，接下来我们去写那代码，让他打包一下啊C。我们来新建一个，呃，就新建as吧，来啊。里面的向外暴露出去两个函数。啊，我们就直接报了两个名字就好了，不用搞得这么复杂。name呢，等于这。好，然后呢，再暴露一个age属性，比如说等于18。好了，ADS，那就向外暴露两个属性啊，好，我们再新建的文件叫BDS。B。这一次呢，叫做import新A新的代表引入A文件，这个A模块的所有内容并重命名为A啊，名为A这个意思。

然后呢，他将这个A呢给报了出去。好，能不能看到。它在A模块的所有内容都引出去来，也就是说这个A呢，实际上是个对象，对象里面呢，有内幕属性和H属性啊，有B模块暴露在内属性和H属性。然后呢，我把这对象啊再作为对象，哎，暴露出去。好，最后呢，在我们的入口文件中应该中引入啊。Import。Import，咱们的这个B文件啊，先看这个B文件，好同样的新as b啊。然后呢，我们要使用这个name属性，怎么用呢？哎b.a.name啊。为什么在b.a点呢，我们看啊B呢，引入的是这个模块B报的内容。而模块B报的内容呢，是个对象里面有个A属性，所以我要首先通过b.a找到这个A属性。而这个A属性啊，又来自于A模块暴露内容，A模块暴露的是个对象，对象里面有name和age。所以最终呢，我是b.a点去拿到这个name的值啊。

好，现在我没用age这个属性，我不管它。好，那么我们打包一下啊，我派打包。OK，打包成功啊，打包成功，那么这里面的输出结果的麦里面呢，就是我们的内容啊，我们往下翻一翻啊。你能看到吗？诶，这是ADGS的内容，这是BDS内容，这是index JS内容，也就说这三个模块呢，全都被打包进来了，诶非常好啊，非常好。好，这是WIFI4打包到体积呢，大概为5.16KB左右啊5.16KB。好，那么接下来我们同样的方法，我们用WIFI5试试。来同同同学一样的啊，我们先去下包。NPM。In-Y啊，写书化，帮我描述文件。在下方啊，注意这个外派五呢，得艾特ne啊。At呢，是下载未来发布的版本，那么未来发布的版本呢，就是这个外派五，我们可以下载一个外派五的一个实验版。

然后呢，还要下载派D干C啊，C呢就直接下就好了啊，只有这个pad呢，需要干成at ne。好，一旦你加了呢，我们可以对比啊，PA4的packson中呢，它的派版本呢，是4.4的大版本啊，4.41.6。好，我们呢，加了at，我们来看一下这个at版本，待会来看啊。好，等他下完。好看这个patrison patrison的外PA5呢，是是五的版本啊，是这个BETA13测试13啊，那么我们就用这个无版本。OK。好，那么同样的写个配置文件。那么五的配置文件呢？和D4是一样的DS没什么区别。好，那么我们来写一下配置啊，像之前那些配置呢，在里面呢，直接可以简写成一行啊mode为。

哎，就可以了啊，就可以了。像前面啊，诶有同学说前面不是要指定这个entry和output吗？对不对，哎，不好意思，WIFI5呢，这些都是默认值啊，所以不用指定，直接测试就好了。我们来测试一下啊。直接输入指定。好。然后啊，他就打包了，哎哦，对啊，这里还有个问题，就是我们没有引入SC，我们将WIFI4的SSC呢复制一份来到派五中啊，再来一次啊，它这报错了，没有入口，我们再执行一次。好了，诶打包的体积呢，5.61，哎，感觉呢更大了一点啊，当然呢，因为这是因为它上面加了很多注释哈，你会发现呢，他们打包的内容会不一样了，WIFI5呢，这里有很多这些这样的注释，而WIFI4呢，他呢，你上面呢是没有那些东西的啊，没有那些东西的。所以WIFI5呢，现在就多一些注释，因为现在在测试版本啊，所以呢，他把一些注释呢，写的比较清楚一点。

是这个，但从这个角度上讲，大家能看到结果是我们打包的这个文件呢，可以少写一些东西，对吧。好，这是第一点啊，当然这一点不是很重要，我们继续研究，第二个就是我们在这里面调为生产模式来看打包的区别。好，我们先切换到四啊，这再打包一次。好，打包后代码的体积为1KB左右啊，1KB左右。同时我们来看WIFI4打包后的内容S啊1KB左右，那么这里我们要注意一下，就是我们呢，在我们在引用的时候呢，只引用的这个属性。那么实际上呢，A点加这个age属性呢，是并没有引用的。也就是说，我们前面说了，当我们使用EL的模块化，并且环境调为生产环境，它应该自动的进行。那我们来验证一下外派四有没进行呢？10万。哎，这时候你看到的有个18啊，有个18，那就恰恰说明这个18呢，并没有被吹掉。

也就是说，Y派四的吹水呢，其实存在一些遗留性的问题。一旦我们的这个模块啊，这样啊，比方说。一代引用BB要引用A，诶这样的一个情况呢，哎，他就没办法分析这个A文件的一些依赖呢，到底有哪些没有引用。所以这就不能干掉这些代码。就这个。好，那么我们来看看PAD5能不能做到这一点呢？来看五呢。我们将环境环境。来个窗口啊，我们来。执行外派的。好构建出来，你看大小四13袋子啊。它之前WIFI4呢，是将近1000K1000BA左右啊，而这个呢，只有43小了，非常非常多，诶，那我们看哪里小了，你看WIFI4这里面点开啊，它是一个这么多值，里面有很多内容啊，这是WIFI4，我们看WIFI5啊，那么这叫正。

五呢，输出的默认叫Dis，默认的默认叫Dis。点开网。你会发现WIFI5呢会非常的纯粹和干净。外面仅仅包了一个I匿名自调用函数。里面呢，使用那个严格模式，因为要转换成五以下语法啊，然后呢，你看里面只打的Jack，并没有那个18。也说WIFI5的吹的功能呢，会更加强大，比起四大家更加强大，同时呢，它打包的体积呢会加小。咱们就这么点代码，你看就已经小了将近啊将近这样，呃，900多杯子就是将近1KB了，就小了小了将近1KB了。所以呢，WIFI5的功能呢，它在WIFI4的基础上呢，变得更加更加强大了。好了啊，配置的话呢，基本上写法是一样的，我们就不多看了，接下来我们主要是看看外派五到底相对于外派四来讲有怎样的震撼升级。

下面有个me，诶，这是我提前写好的一个说明文档，咱们呢，可以看这个文档来观察里面的内容啊。好，我们来看看。好，WIFI5呢，它主要关注于啊以下这些内容的升级啊，其中第一个提九提通过持久缓存来提高过去性能。比如说之前做持久缓存啊，诶我们之前通过做BA的话呢，有一个BA的一个cash director做缓存啊，之前呢，我们在做那个压缩的时候，哎，用那个。TRTR啊TR这个插件去压缩的时候呢，我们可以通过一个哎cash去缓存。那么WIFI5呢，它新增那个属性就叫cash哎，可以更好的缓存这个打包后购机后的资源，从而呢，第二次打包速度呢，会更加快一些啊，后面来看。然后呢，更好的算法和默认值呢，来改善这个长期缓存就是。啊对这个哈系值的一个计算呢，会以更好的算法计算，从而优化性能。

第三个呢，就是我们刚才看到这个数摇功能呢更加强大啊，从而让台代码的体积呢更小。第四个呢，可以哎，消除内部的一些莫名其妙的一些内容，就是我们的WiFi和生成的一些莫名其妙的一些东东啊。从而呢？哎，我不需要再改动太多的IPAD4的一些内容就可以实现了。最后一个呢，就是引入一些比较重大的一些更改，从而呢，为将来的一些新功能呢做准备啊。不知道。好，其实最关键的就是前面三级三个点。那么下面呢，有些详细的内容，我们看一下。WE4呢，它自动的会去引入很多这些，诶，我们不应该点啊，引入很多这些啊，Modus中的一些。比方说它的一些啊，或者是process啊，这些东西，它默认的可能会被加载进来。啊，这样呢，会导致我们整个的这个代码体积呢，会变成变得非常庞大啊，会变成非常庞庞大，那么五呢，就停止自动停止加载这些模块。

它呢主要是专注于前端的一些模块去做。所以这里呢，大家注意，就是当你使用派五的时候，你要去使用no的东西，你需要手动的去加载引入啊，否则的话呢，它是没有的，没有的话你再使用就会报错。所以要注意。第二个呢，就是它会添加一些更好的一些啊，一些哈一些一些哈希值的算法啊，在生产环境下是默认启用的，所以我们不用操心。第三个呢，就是那个ID值的计算呢，更加更加精确一些，之前呢，我们可以通过。去做代码分割的时候，可以通过派呢去命名啊。那么现在呢？它内部自己有一个秘密规则，而不需要我们再改了，他们内部会自己填充。当然自己提出的这个规则的内容呢，诶，会稍微有一些些别扭啊，但是记大体是一致的。如果你真的强行就想他的名字就是这样子，那你还是可以这样设置啊。只不过呢，哎，在过去呢，我们不设置的时候，它是以ID012命名，而现在即使我们不设置，它也是一个较较为准确的一个文件名。

这是的。第三个就是更加牛更加牛逼了。前面我们刚刚写的这个例子就是这个啊，A模块呢暴露了两个内容，B模块呢全部引进来了，C模块在引入B模块啊，是这样的一个依赖关系。那么C模块虽然只引用A模块的一个东西，但是呢，对于wi来讲，它检测不出来。而Y25呢，能够非常棒的把它删除掉。所以这个吹吹性功能更加强大。其次，它能处理好多个模块之间的关系。比方说我之前定义那个模块里面那个something。好，接下来定义那个B模块，它引入了something的内容，然后又定了个test方法。好，对于外派四来讲呢，他认为这个test方法使用了something这个内容，即使你test方法你不用我的something呢，还是会被打包进去。啊，是这样。

好，但是现在呢，WIFI5呢，就是发现如果你test东西不用的话，诶你不用，那自然我这里面的something这个东西也不用，这个something也得被除。所以WIFI5呢，能够准确的删除到这个something这个模块，而WIFI4呢，它是删除不了的啊这个。那么第三点就是我们之前的呢，只能对EL的模糊化进行处理啊，现在呢，白PA5呢，能够对common的模糊化也能进行出了。啊，当然是有要求的啊，具体要求大家可以去看一下官方的一个介绍。所以之前呢，我们要求的是以module和生产环境为基准。而现在，如果你升级到WiFi，那么commons也能进行。好了，那么这样呢，就是我们的tree功能的一个提升。然后输出端的话呢，我们这正常默外派四呢，默认输出只能输出E5以下的model啊。那随着我们浏览器呢，越来越越来越发展，越来越先进啊，所以越来越多的浏览器呢，支持EL的一些一些语法了，所以呢，它开始支持我们输出的解，输出代码的是exl代码。

输入六的好处在什么呢？在于我们就可以减少BA对它进行编译的一些措施了啊，因为BA编译越多，它时间就越慢啊，那么它编译越少，那自然就快。所以这个呢也是啊，如果你考虑输出的代码运行的浏览器，它是支持E6的，那么就可以使用这种方式去输出啊，通过out EMA来指定我们要用的是ES版本。这个时候它输出的时候呢，就会是EL的版本的代码。还有对我们的代码分割optimization里面的代码进行了优化啊，比方说之前我们的只能指定一个具体的值，比如说30KB啊，30超过30KB的我就提取成一单独的串，小于30KB的我就不干，我就不干活。现在呢，针对JS和样式文件呢，可以做精更加精确的划分，而JS呢，30KB样式呢，比方说50KB啊。

这个例子。所以呢，能够让我们代码呢更加精确，而不是呢，一个大概的范围啊。下面呢，能够就是这个就是我们所谓的长久缓存了，之前呢，我们要配置什么B缓存啊什么啊各种缓存，那现在呢，我们会统一在这里面去配置我们的缓存啊。那么缓存的类型呢？其实有磁盘存储和内存存储两种方式。车主呢，叫file system类似呢，叫做memory啊，Memory。好，这个呢，就是让我们缓存呢，缓存起来，然后第二次呢，打包的时候性能就会更加高效啊就是这样的。默认输出的目录呢，是在not点下面的PE。下面呢，还有就是它会自动揭示输出的文件，因为在过去呢，外派第一次打包的时候，永远会把文件的全部输出啊。然后再重新构建的时候呢，诶，它只会修改更新的文件。

但现在啊，不一样了，现在WIFI5呢，它会第一次构建时就会找到输出的文件，看有没有变化啊，从而决定呢要不要重新打包所有内容。所以这时候如果你内容没有变化，那么他第一次的时候呢，就不会输出任何东西了。从而加快首次购机打包的速度啊。所以呢，这样呢，就是解决啊，我们每次首次打包速度慢的一个问题，它能让第二次打包的速度更快一些啊。那么要做到这一点，让同样的要利用上缓存才行啊。还有就是给了很多默认值，比方说入口文件的默认值呢，就是给SC下面的index，所以呢我可以不写，如果是这个地址我可以不写。路径呢，是这个地层啊，如果我不想改的话呢，也可以不写。名，名字呢是这个names，如果不想改也不写。这也是为什么，诶，我在WIFI5的配置文件这里只写了一个mode就可以了。因为这三个呢，是它的默认值啊，刚刚那三个是它默认值，所以我们不用操心这么多。

好了，那么五呢，还有很多更新内容啊，有兴趣的可以点开这个网址，自己去自行查阅。那么好，那么这以上呢，就是我们对外派股的一些基本的介绍和使用。总而言之，WIFI4这些怎么用呢？WIFI5也可以怎么用，那么在用的过程中呢，大家要注意，就是我们相关的一些插件呢，可能要升级啊，要升级，那么具体怎么升级，你可以关注这个插件的一些相关的文档，去查阅一些内容。甚至呢，你可以自己尝试一下，诶，如果发现这插件不行，你可以加上一个艾特ne下载它未来发布版本，诶可能就靠谱了啊。好，总言之，WiFi呢，WIFI5呢，目前来讲和WIFI4的变动呢，并没有太多翻天覆地的变化。而WIFI5呢，主要是专注于性能啊，性能的方面诶，提升了以下这些点，所以我们主要的给列举了几下点，其中最实用的功能还是这个垂生性啊，还是这个功能呢，比较实用啊。

那么以上呢，就是我们整个这个外派五的一些介绍和使用说明。好，那么大家看了我的介绍，那么大家可以自己手动的尝试一下，看一下WIFI5这个内容呢，到底该如何使用。好，那么本节对WiFi的介绍就到这。