40-尚硅谷-webpack从入门到精通-总结webpack

那么最后呢，我们大家一起回顾一下整体的外pad知识，我们来看一看我们学到了哪些内容。来，我们可以打开课件啊，来看一下，从WiFi从入门到精通。我们首先呢给大家介绍一下外派的一些内容，大家第一次呢去写了一下外派的基本配置。然后接下来我们来看一看开发环境的配置和生产环境配置。然后进阶的优化环境配置，以及我们将一些剩下的一些配置啊，进行详细的一些介绍。最后，我们给大家带来一些展望未来的外派五。这个过程中呢，我们需要掌握一些哪些点呢？我们再来复习一下。首先第一个啊，咱们要知道pad呢是一个构建打包工具。然后呢，它里面呢，有五个核心概念，分别为entry，只是我们打包的入口。那么经过学习啊，我们知道ENT呢，有单入口和多入口之分啊，虽然它只有三个，但是我们一般为单入口和入口。

安口呢，一般来讲就打打包输出就一个串口。那么多入口能就对应的多个窗口。好，那么第二个是输出啊，指定我们派打包后的资源呢，输出到哪儿去啊，输到哪去了。Load就是帮我们派去分析啊，它处理不了的文件，比如说样式文件对吧，比如说图片文件，那么通过load去处理。那么插件呢，就是做一些功能更加强大的活啊，就这样的。那么模式，我们有开发模式和生产模式，对应我们的开发环境配置和生产环境配置。而开发环境配置呢，和生产环境配置呢，他们对应的一些插件啊，启用的就会不一样啊，咱们清楚。那么第二个呢，我们还要清楚这个我们的环境具备什么特点。开发环境呢，是让代码能本地调试运行即可。而生产环境呢，则需要代码优化，上线运行。好了，那么这些都是些基本概念，那么下面我们去写了一下相关的配置啊，当然在写配置之前呢，我们尝试下载了we派，并且呢最基本的运行了一次，发现PE呢本身就能编译打包JS和J，并且能识别EL的一些模块化语法。

同时呢，还能压缩这S代码啊，但问题是它不能处理样式资源、图片等资源啊，不能编译EL的一些基本语法其实是不能编译的，它只能处理ES6的模块化语法，而EL的基本语法呢，需要借助后面的内容才能编译。所以啊，我们就再来第一个开发环境配置。整体开发环境呢，我们主要处理的资源啊，就是我们的CS资源啊，还有我们的资源，当然还有我们图片资源以及其他资源啊，我们主要是针对这些资源呢，进行了各项处理。好，首先呢，我们处理的CS资源。我们使用了load sal和less对我们的样式资源做处理。好，因为资源啊，你将来可能有其他资源啊，可能只用CS，可能是less，可能是S，那么你要配置不同的配置。

比方说要处理资源，那么你得配置一个这样的配置。啊，检测的文件是CS使用的load呢，分别为loader和loader。那么在这呢，我们知道了右的一个执行顺序是从下往上的。好，当然less多少呢？就得加再加个less了，加这个less。那么我们要清楚怎么去处理这些样式文件。啊，将来呢，可能你遇到SARS，那么这里呢，你需要把less改成S，那么就可以了，那同时呢，这个正则呢，需要改成检测SS文件。好，处理完样式资源，那我们接下来处理H资源，这里面我们用了个插件HL。通过以指定文件为模板，创建新的HM文件。HL用来我们的，呃，处理HL资源。好，接下来呢，我们又打包了图片资源啊，图片资源呢，借助的是一万二的去处理的。

那么在这呢，我们为它有个选项叫limit啊，Limit能够帮我们啊去图片呢资源的做些优化。这些优化。那么同时通过name呢，可以改一下这个图片的名字啊，让它不要这么长啊，让它短一点。好，UR呢，默认情况下能处理样式文件中的一些图片资源问题，但是呢，如果遇到H中的图片呢，它是处理不了的，所以这里面我们要引入一个叫HL load，专门来处理这个hll load HL里面的图片问题。好，这里又带来新的问题，就是HML里面的图片问题啊，他们使用的是commons。而我们的这个呃，UR呢，默认使用的e Mo，所以我们需要通过Mo为for关掉咱们的这个UR的S。好了，那么到这呢，我们就处理好了我们的图片资源。那么我们还有其他资源，这时候呢，可以通过统一的处理啊，我们简单的排除一下一些资源，那么剩下资源呢，就会交都交给他去处理了。

那么同样的可以给它的名字呢，改一改啊。所以呢，这里面我们能学到就是我们使用的各个load加上一个插件来处理好的这些所有资源。好，那么大家写到这里呢，我们发现当我们要使用多个load处理的话呢，会用use，使用单个处理的话呢，直接写load啊，然后加上options，修改这个load的配置。好了，那么写到这儿呢，应该是大家能会一些咱们的load的一些作用，以及它们的用法。那么后面呢，我们就讲给大家讲的一个DV server帮助我们开发环境的一个小小的优化，就是说白了自动化。让我们不用操心啊，自己去写代自己去编译啊等等，他们会帮我自动编译，自动运行，自动打包，诶这样呢，能够让我们开发更加方便一些d server。

好了，那么到这呢，我们就完成了我们开发环境配置，那么这里特别要注意就是我们要注意有两个指令，一个是PA。一个是d d server啊派d server就简单写一啊。的指令呢，它一定会输出某些文件输出出去。而外派低于so呢，是在内存中编译打包的，所以要注意啊，所以我们预写外派低于so呢，前面加了NPS，因为没有全局安装，得在本地运行。而派呢，因为全局安装过了，所以不需要加MPS诶就可以运行了。是这个。所以大家呢，还要清楚这两个指令之间的区别，当你需要输出文件的时候，就得运行这个PA指令。那你想本地开发调试的时候呢？就会由ipad低于server者制定来启动于server来帮你自动编译，自动运行。好了，那么这以上呢，就是开发环节这些非常基本的配置。那么下面呢，我们做一些生产环境配置，哎，首先对样式文件处理，将样式文件呢提取成单独文件。

因为我们知道前面经过我们处理，我们是S。这样的问题呢，第一个就是JS文件的体积变得很大。啊，第二个呢，就是它需要先加载JS，然后再动态的创建这个style标签，那么这样式渲染速度呢，就慢慢的话呢，就会出现闪屏现象，诶这样的用户体验也不好。所以我们需要提取成单独文件，然后通过link加载。那么这里面呢，用上一个插件，Mini这个插件去单独提取，那么要注意啊，除了要使用这个插件以外呢，它还需要通过mini这个插件的load去对这个插件取代这个sal，对这个。样式文件呢进行单独提取。所以用法上呢，稍微的麻烦一些，那么大家要切记啊，不要做错了。做完之后呢，我们的样式文件呢，就能单独打包成一个文件，然后通过HL wi插件的原因，它会自动的将这个样式文件呢作为link标签引入进来。

所以我们呢，不用操心他的引入的一些关系了。好，做完单独处理完之后呢，我们还要做金性处理，这里面呢，我们会用一个POS的技术来做这个性处理。那么这里也看到了啊，我们使用post呢，来帮我们做兼容性处理。那么做这个的话呢，我们记得要在咱们page中加上一个配置，叫做browse Li。来指定我们在开发环境亦或是生产环境下，我们要做怎样的配置。那么开发环境呢，我们只要能够运行即可，所以呢，我们不需要做太多的兼容性，诶，只要最新的一个版本就够了。啊，生产环境呢，是为了满足绝大部分浏览器能够运行的，所以我们要写的稍微的全一点。好，那么开发环境和生产环境怎么使用呢？诶默认情况下呢，它使用的是生产环境。当我们设置process等的时候，就会激活开发环境的配置。

所以啊，如果你想征用开发环境，可以调为development，如果你不想用开发环境，不用设置，它默认就是生产环境的配置。好，那么这是我们的样式的兼容性，最后呢，我们压缩了CS，使那个插件叫optimize CSS这个插件去压缩的。那么这插件的用法呢，非常简单啊，直接调用就可以了啊。它中间呢，可以传一些参数，诶感兴趣的可以去看这个插件的官网，看可以传什么参数，那其实到这呢，我们已经能够压缩了。好，接下来呢，处处理完CS文件，我们要处理JS文件，我们使用了这个ES load帮我们去处理，对咱们JS代码进行语法检查。而它的作用呢，就是为了帮助我们，哎，让所有程序员啊，他们的风格是统一的。第二点呢，就是消除一些呃一些低级一些代码错误啊，从而呢，避免咱们上线程序输错。那么这里面呢，我们会介绍一个比较有名的一个JS的一个风格，叫做L。

啊，这个呢，是一个咱们社区中最流行的一种风格规范了，所以呢，我们就使用了这个air这个风格呢，来去做维护的。那么这里面呢，我们要做的事就是哎，需要写上这个相应的啊，需要写相应的。那么这里呢，我们没有写上去啊，这里少了个，我们可以把它加上去啊。来，我们找到我们的生产环境，找到这个JS的语法检查啊。我们把这些的配置呢给复制上去。那么就OK了。啊，复制到这CTRLV啊CTRLV。然后呢，我们把这字体稍微调小一点，稍微调小一点。好了啊，这就yes的处理。好，通过face为触呢，它会自动修复我们出现的错误啊，所以呢这样呢也比较好。那么yes it load呢？它也同样需要在我们的PA jeson中进行配置，啊，配置呢，这个air base继承这个LB的一个风格规范。

那么后面呢，我们调了一个browse为啊，是为了让我们呢可以使用全局浏览器中的一些啊，一些全局变量，而不至于呢，在我使用window的时候报错啊，所以大家记得调一下。好后面呢，又做了这个JS的一个兼容性处理啊兼容性处理。那么这里面使用的是去做的，这个关键大家知道啊。那么金融系处理呢，我们分为三步去做，答123啊，第一步呢，我们就使用的BA这个预设的一种方式啊，BA的。For you young me。那么这时候我们发现呢，它只能加一些基本的EL语法的进行转换，而且较为啊麻烦的EL语法，比方说promise，它就不转换了。所以这时候我们要做全部的金融的话呢，我们得使用at BB这样的一个金融的包来帮我们做。但的问题呢，就是在于它会把所有系的依赖呢全都引进来。

而可能呢，我们只做其中的一部分的一个兼容性。所以这样也不好。所以最终呢，我们使用的Co GS的方案去实现了按需加载。我需要使用什么兼容性问题，存在什么兼容性问题，你帮我做就可以了，而其他的不存在的问题呢，你别帮我使用。整体配置呢，诶，大家要仔细观察这个b load的一个配置啊，通过usage use in usage这个方式来实现按序加载。然后呢，可以通过target来指定我们要做到怎样版本的浏览器。好了，那么后面呢，我们就尝试压缩JS代码，压缩的话呢，其实不需要做太多事，只要调为production，那么就会压缩了。好，后面呢，我们做了HL压缩，同样的，不用下任何东西，咱们HL we就能压缩调个啊SE移除空格以及remove comments去除注释，那么HL就压缩了。

那么到这呢，我们就完成了我们的整个生产环境的一些基本配置。那么下面呢，我们做了一大堆优化。对吧，那么第一个呢，就是我们的一个HMR功能。叫做热模块替换。那么我们在学任何东西之前啊，大家一定要切记，首先先要清楚这个概念是什么意思啊，然后再学习我们该如何去做这个事儿。热门或计划呢，主要是让我们代码更新的时候呢，不是全部更新，而只更新一部分啊，只更新一部分，就是哪部分变就更新哪部分。这样呢，才能让我们构建速度更加快一些啊。那么热门化计划呢，只我们使用的话呢，只要调一个hot为true就够了，哎，它仅由于开发环境。开发环境。好，开发环境下呢，我们的样式文件呢，通过style的原因呢，它是默认实现了这个，呃，样式的这个热模化替换。而GS的热模替换计划呢？诶，得稍微写点JS代码。

对吧，比方说像我们这里，我们来看一下啊。我们得写一个。If Mo hot Mo hot self接受一个文件啊，这个时候呢，当这个文件发生变化，那其他文件就不会发生变化了，只有这文件会重新打包编译啊，所以这就是模块替换功能，而像其他文件如果没通过这个方式去去绑定，那其他文件一旦变化，那所有文件都会变啊，所以呢，这是这样的。好了。热模块激光呢，JS呢需要做特殊处理，然后呢，接下来我还有个source map的一个一个方案。Map呢，就是帮我们去啊，提供一种更好的一种开发调试模式。提供一种诶，购机后代码到源代码的一种映射这样的一种方案。关键是啊，我们要知道它里面的一些内容啊，里面些内容。这里面呢，同样的大家可以打开我们的这个文件，找到这个配置往下，下面就有我们的一个详细注释了。

好，大家都可以自己总结成一个笔记啊。Cos map里面，关键是这里面。有很多参数可以选line啊，Hidden啊，Evil和这个trip等等。最终我们只看总结下来的东西啊。就是开发环境下呢，要么用evil map，要么用evil。第一种方案的这个代码的完整度更高，同时快也也也挺快的啊。啊，第二种呢，就是它呢，在它呢，没有列的信息，但是呢，包含了其他的信息，那么代码输入呢，也还行也还行啊。也还挺坏的。那么map或者map，那么第一种呢，是最完整的一种方式啊。那么第二种的话呢，就是指忽略列的一种方案啊，忽略列的一种方案。我们说了啊，那么后面的脚手架呢，我们后面用的脚手架呢，基本上采用的是第一种，所以呢，用第一种呢，是比较安全和方便的。

啊，第二种的话呢，因为忽略了裂，所以呢，如果你调试的时候，诶看到很不习惯的话呢，那么还是用第一种好啊。啊，如果你觉得裂有没有裂无所谓，那你还是那你可以用第二种。那么这是map的一些方案啊。再接着走啊，我们还有one of来优化一些打包的一些构建速度的，让某一个load呢，只执行一次啊，就是某一个文件呢，当被一个处理好了，就下面的漏呢就不看了。啊，这样的一个东西。那么这里要注意就是我们不能啊，这里有个yes is和lo同时要处理JS文件。所以咱们要把它提取出去啊，要注意。下面呢，有缓存啊，缓存呢，通过缓存这里主要是大家知道那个哈的区别啊一个哈。还有那个的区别。啊，就是三个哈希值的区别。第一个哈呢，是根据咱们外派打包，它就会生成这个哈希值啊。

问题就是文件，即使文件没有变，一旦重新打包，他其实就变，这样不行。创卡呢，来自于同一个创口的哈希值是一样的，那么呢跟是同一个创，所以好哈是一样，所以这样不行。只有可能哈值呢管用啊，它呢是根据文件内容生成的哈希值，这样呢才比较好。一旦我A文件发生变化，那B文件呢，它不会变。对吧。那么这个哈，这里要注意啊，包括我们后面做代码割的时候，我们记得要过个方式啊，将单独的一个文哈单。否则会导致A文件的AJS文件修改，导致B文件也被修改了，因为B文件保存A文件的这个哈希值，一旦A文件的哈希值变，那B文件内容也会变。怎么解决呢？将A文件的哈希值呢，单独打包到一个runtime文件中，那么这样呢，你即使你A文件变，最多是runtime文件变，而BB文件是不变的，这样缓存呢也不会失效。

好，这个呢是后话了，我们后面来看啊。然后呢，Shaking属羊对吧，开启YES6。模块化开启，那么就会进行数摇了，去除无用代码。去除树上的一些枯萎的叶子啊。那么通过后面的学习，我们发现在WIFI5中，咱们的数学功能呢更为强大。而Y24呢，数量功能呢，存在一些一些小小的问题啊，小小的问题。一旦我这些文件嵌套的引用啊，这样呢，它有可能鉴别不出来了，所以这是这个这个问题。所以当我们从事WIFI4开发的时候，我们要注意啊，就尽量的减少这样嵌套的引用的关系啊，否则的话呢，就会导致呢，这个树能啊不能彻底的啊啊删除这些无用代码。好，第三后面一个呢，叫做代码分割啊，代码分割的作用就是将一个大的JS文件呢，一个个拆分成小的GS啊，将大的GS拆成小的GS，这样呢就能实现并行加载，或者说我们所谓的按需加载。

它呢有三种方案，我们通过三个DEMO来演示的啊。第一种叫做多入口拆分啊。第二种通过optimization去拆分啊。多入口的话呢，一个入口拆分成一个串串。Organization呢有两种方案啊，一种是它可以拆将not modus里面代码单独打包啊，对吧，但是要求是大小呢，超过30KB啊，不然的话呢，也不会打包。单独打包成一个串口。好，如果第二种就是如果你被多入口引用了两次，也会被当大包，那前提条件是也是一样啊，要超过30KB，要超过30KB。那么最后一种呢，是通过这个语法叫做import语法，诶，只要import语法导入的文件啊，那么都可以去按需加载啊，都可以实现这个，呃，代码分割了。

那么我们将来学习的这些框架啊，他们对这些路由的一些分这些处理啊，也会使用这种方案去做的。好后面加载呢，加载和加载其实差不多，前面差不多的就是种方实现加载和加载。E呢，是让我们的应用程序呢，可以持久的缓存下去，使用的技术呢，是我和boss这个相关的技术啊。P呢是由service worker和cash组成的，而这两个方法呢，因为有兼容性问题啊，所以呢，咱们开发的一个库啊，开发库叫做work bos来帮助我们去更好的使用p wa这个技术。好，这套这些技术呢，大家注意就是写完代码之后呢，我们JS文件呢，也需要写些代码啊。插件本身只能我们生成一个service。而后，我们还需要写一段JS代码来激活它的使用。所以要注意啊。这代呢在下面啊，它呢兼容性问题，然后呢，再去注册这个service worker才能生效啊。

自己要注意。好，后面的多进程打包three the啊多进程打包呢，这里是有利有弊的，是一个是把双刃剑啊。力的地方呢，就是如果你禁用程序打包速度很慢，诶在这个three load加在这个blo后面呢，就会极大提升这个lo构建速度。啊，因为是多继成同一时间干多件事嘛。那么B端就是它每个进程开销，启动是有开销的，大概为600毫秒。并且通信之间也有开窍。所以如果你勾勒时间很很很短，你去用这个load的话呢，反而会更长啊，所以要注意。好，最后呢，有个externals，诶让某些文件的不打包，我通过外地的方式引进来。啊，这是N，比方说啊这种方式。而第二的话呢，就是类似的啊，也是让某些程序文件的不打包，但是呢，我进行单独打包去做的，单独打包做的啊。

这是这个第二。好，那么deal呢，配合这个deal，那么最终呢，Externs的就是哎，如果我这个文文件是从外点引入，那想都不想用exters。如果这程序呢，哎，是我想自己有想法把它打打包在某个地方，然后再去啊部署运行，那我就用第啊。后面呢，我们给大家介绍一些一些配置的一些详情啊，比方说入口entry有三种方式，有字符串，有咱们的呃对象有咱们的一个数组，对吧。那么我们一般还是字符串单入口啊，多入口对象呢，用的少一点。输出呢，我们介绍一下输出的几种方案对吧，有几个属性，几种常用的属性，他们分别要做什么事的。大家呢，好好的看一下这个资料啊。然后呢，我们介绍这个Mo，它哪些参数可以选，这些我们都已经过了，什么优先执行，然后呢，Include只查某一部分的代码。

呢，排除某部分代码。还有so帮我们解析模块，诶这个呢，是我们前面没用过的，哎，后面新讲的，它可以帮我们配置解析模块的一些规则。比方说配置解析模块的这个路径的一个别名，对吧，我们简写路径。省略文件后缀名对吧？让我们写文件的时候可以少写一些文件后缀名，同时告诉我们WiFi解析模块去哪个目录找。这样呢，找的速度就更快一些啊。同时还有DB server的一个详细配置方案啊，所以我们解释的比较详细，可以删除一些啊，不用的一些信息提示信息。啊对吧，然后一些错误呢，不要提示的全屏，同时给大家配置那种啊服务器代理方案。怎么解决我们开发中的一个跨域问题，怎么使用pad来解决，诶那么这种方案呢，如果你学过这个view啊。VIVO脚手架呢，也是以类似的方式去配置的。

所以你可以认为他一点都没有改啊，一点都没改。好了，后面呢，我们介绍一下optimization啊，Optimization这里面呢，主要是大家需要掌握的是这个runtime runtime啊它的一个解决问题的。咱们的缓存呢，默默认是存在问题的，加上呢runtime串呢，诶就可以把这个问题给解决了啊前面介绍了。就一旦A文件引入这个B文件，B文件一旦变，那么A文件中B文件中哈希值呢也会变，那么因为文件的变化导致A文件也变了，那这样呢就会导致问题。所以让呢，就是把这个哈希值呢，给单独打包成一个串一个文件，那这样呢，即使你B文件变，只有这个run文件变，那没关系，我A文件呢是不变的啊，不变的。同时呢，你可修改咱们的这个生产环境的一种压缩方案啊，一些压缩配置，比方说做的更好一点，开启缓存，开启多集成打包等等。

那性能更好一点啊，通过这个T。好，然后呢，我们其实还介绍了一下这个speed的一些默认配置的一些方案，大家可以仔细的看一下我们代码啊。代码里面呢，有详细的介绍。详细的一个注释介绍啊，所以呢，大家一定要写一写，看一看注释啊。好，那么最后呢，我们就讲了一下外派五的介绍，派五介绍呢，我好把它东西呢放在这个文档中，大家可以看这个文档啊。所有内容呢，都在这里面给大家介绍一下它的主要核心内容。那么最后的总结呢，就是这个功能呢，变得非常非常强大了。基本上能将我们用不上的一些代码呢全部删除。并且呢，WIFI5呢，压缩体积呢，那有显著性的减小啊。那么我们可以看到它最外面的只会报一个I1，匿名的一个自调用函数啊，只会报一个I1模式。所以呢，然我们大毛的体积呢，能变得最小最小。

就是这个。好了，那呢，还有很多内容，大家更想更清楚，更多的可以看一下这这个资料，以及呢，看一下这个。啊，咱们的这个网址去里面呢，去看一下详细的内容啊，网址呢是个英文内容啊，所以呢不太大家呢，可能会看起来不太方便，所以呢给大家翻译成中文了啊，大家可以看一下中文的一个翻译。好了，那么到这里面呢，我们就基本上将前面的内容呢，简单的过了一遍啊。好了，那么学到这呢，那么你就应该要懂得咱们外派的一些最基本的用法，以及如何去搭建一个开发环境，如何搭建一个生产环境，以及如何通过各项优化去优化我们的一些构建速度啊和代码的性能。最后呢，我们在写配置的时候呢，可以写的更加精确一些，写的更加细致一些，让我们的配置呢。执行效率更高，或者说让他配置呢做的更好一些啊。另外呢，诶我们呢，已经迫不及待等着这个外派五的出现了，对吧，一旦它出现呢，我们可以通过我们学的一些内容，也可以无缝切换到这个外派五的一个使用。

啊，外派五的使用。好了，那么这些呢，就是我们前面课程的一些主要内容了。主要内容了。好，那么大家还想要知道更多的呢，我们在未来呢，会发接着去发布我们的一些WIFI5的一些剩下内容，比方说WiFi的原理讲解WiFi load的一些原理，插件的原理等等。对吧，还有一些的，比如说我们的脚手架，Rise脚手架和V脚手架，它内部的配置是怎么构成的。哎，那我们自己去写一个基于RA的脚手架和基于view的脚手架，那么可不可以呢？那当然都行，那么这些这些知识呢，我们都会放在这个，咱们本期视频的下一章节去讲。那么我们本期视频呢，是外派从基础到从入门到咱们的一个，呃，深入啊，从入门到精通的一个上级啊，那么后续呢，我们会发布这个派从入门到精通的一个下级。

那么欢迎大家随时关注我们上硅谷啊，关上官网，或者关注我们B站的上硅谷的相关的视频啊，我们会及时的告诉大家，我们这个视频更新了。那么大家呢，可以从更新的渠道中呢，可以从这些渠道中呢，得到我们更新视频的信息，从而呢，让你的wipa呢更进一步达到，哎，我们最终的企业级专家的一种啊方案一种方式。好了，那么本期视频就到此结束。那么同学们再见。