Web前端框架通用技术 webpack5 2_认识和了解webpack的工作原理 学习猿地原创

大家好，我是学习园地的特约讲师高峰。上节课呢，我们了解了web派的学习目标，那这节课呢，我们来认识一下web派，那外派呢，是一个模块打包器，也就是一个构建工具。用来干嘛的打包的对吧，那有的说了。我为什么非要打包呢？如果我不用。我不打包，那么我一样也可以写前端的页面啊，前端的页面无非就是由H多个HTM文件组成的，多个图片，多个样式文件，多个JS文件组成的吗？我一样可以写的，一样可以发布上线啊，让别人访问的。的确可以，但是呢，你如果不使用外派，你发布的项目网站有几个功能，你想想它是没有做的，你可以看一下你以前没外派写的项目，比如说。你的JS文件你压缩了吗？你对他写的语法你检查了吗？对吧，那。再比如说你的RTM文件那些什么，那些空格你去掉了吗？注释你去掉了吗？CSS你压缩了吗？空格去掉了吗？对吧，还有一些语法转换上对吧？另外呢，我们在写样式的时候，还得处理浏览器的兼容性。

对吧，包括JS我们也得处理浏览器的兼容性，那你怎么处理啊，在样式里边我们一条一条写一个属性，然后呢，为了适合各种浏览器，针对各种浏览器写多个属性，对吧，那你开发效率会大大降低，而如果有了我们的web pack。那么我刚才说的那些工作，他都能帮我们做了，我们只需要把精力放在我们编写的业务流程上即可，对吧？其他的功能我们都不用做，外派D就帮我们把这些复杂的过程给我们做了，把成一个包裹对吧？压缩过的，优化过的对吧？然后呢，放上去，这样的话，我们如果没有外pad写了一个网站，有可能比如说十兆，那我们压缩过，处理过对吧？同样看到效果。对吧，那我们还不处理那些兼容性开发的时间，你有可能缩短一半。

那上线之后运行的速度有可能提高一倍，因为打完包之后压缩过了你的项目有可能是原来的怎么的几分之一了，对吧。这就是用web的一个好处。那我们看下web派。我们得了解一些它的呃功能外派的官方网站，我们进入一下。你看这是外派的一个光帆网站，你看这个是打包意思，打包你的脚本对吧，然后它这块有一些特效，你看这么多资源。对吧，这些都是资源，图片资源，Sass sa资源对吧？JS资源，Nice资源等等，它都能够你打包你的样式，打包你的资源，对吧？然后给我们生成我们上线浏览器认识的JS文件，JS文件，PG文件，JPG文件这样的，当然也有中文的这样的文档啊，但中文档的话，一般的更新会比这个稍稍慢一些，你还可以看这个里边怎么使用的文档，但是咱们讲课的时候呢，嗯，尽量不打开它啊。

因为新闻大家也看的，呃，当然英文好还可以。这就是外派那。外派呢，其实我们就可以看作是刚才说了构建工具，也就是什么模块的一个打包机，其实他做的事情呢，就是几点分析你的项目的一个什么一个目录结构。然后找到呢，比如说加va速块的模块，因为它默认只能打包Java速块的模块，当然了其他的资源呢，咱们都得去往里加，去配置，比如说HTMCSS啊，SS啊这样的一些资源，对不对，然后呢，找到比如说这些资源。和一些浏览器不同，直接运行的一些扩展语言，比如说呃，像呃SLSS和SARS lass对吧，以及呃ES6等等，然后将这些呢打包为。以浏览器认识的格式。然后购物用来机使用，其实它的这是它的主要的功能，对不对。

所以说那我们为什么要使用这个外派呢？就是因为很多网页其实可以看做是功能丰富的一些应用。那既然是功方应用，就拥有复杂的价va或代码，需要一大堆的依赖，你有可能有好几百个DS文件，那这么多依赖怎么去管理啊，对不对？你都在RTM文件里边一个一个块SR去包含吗？对吧？所以呢，咱现在都是模块化开发，那咱们讲VRA的时候都是组件式开发，所以呢，为了简化开发的复杂度。那前端就使用这个web pad这样的一个工具，可以让我们项目变成模块化的开发，让我们可以把复杂的程序细化到。很小的文件。就是颗粒化，有了颗粒化的文件，不怕它颗粒化比较小的文件，那我们打包它还会生成独立的一个文件，这就是这个好处。最主要的是他还能帮我们把这些前端需要的扩展的语言，比如说。像csi里边，它不能够有逻辑，不能生成变量，不能有for，呃，不能有if语句，对不对，那使用S或者less，这样的话，就可以使用语言去编辑什么这个了，编辑成sa就是编译样式了，但是编译用样式，我们浏览器只认识CSS，所以用这个打包器。

也是ipad就可以把它转换成我们用的csf文件，这就是把一些可扩展的这些语言对吧，也编译成我们浏览器识别的这样的一些语言了。另外呢，它的压缩效率啊，对不对，另外我们在做一些开发的时候，有可能有的时候去偷别人代码，因为前端代码是比较好收的嘛，对不对，你右键查看页面源码，就可能看到源码你复制粘贴过来的，对吧，有可能你就要一个比如说这个旋转的特效对吧，明明就十条GS代码，但是你找不到这个十条GS代码，有可能你下载过来是一个很长的一个JS文件。有可能有上万条，但是你就用十条，那其他的呢，怎么办呢？你用外pad，你只能你用ipad的话，你就能只选择你用到的代码打包成GS文件，你用不到的代码，它可能给你什么打包的时候给你什么，给你去掉了。

就这样的功能。所以说学习了外派就可以大大的提高，怎么着提高我们的开发效率？但是呢，利用他的开发的呢，这些文件呢，往往需要进行额外的处理才能用浏览器识别，所以呢，我们学习ipad就是学习它怎么去配置。不然的话，你在里边一个一个都手动手动的加载去配置的话，是非常繁琐的。所以呢，这就是D出现的一个，呃，前提，前提的一个条件。那么外派呢，它具有这样的功能，我们认识他了，那它是什么样的一个，打包的一个。一个呃，一个原理呢，什么样的一个打包的原理呢，那比如说。那我们看一下这个吧，看一下它的一些。呃，基本的一个工作的一个原理，你看啊，我们学习外派要了解这几个概念，因为我们在讲课的时候呢，会经常的去说。那树结构模块还有什么啊，Cholk还有扳。

这几个是干嘛的对吧，不然我一提，哎，什么是那个哈希ID啊，超ID啊，对不对，那什么是打完包之后的一个班头啊，对吧，这不太清楚了，那我这块给大家画一个图。图。在我们写项目的时候呢，会有很多个什么，会有很多个GS文件，比如说。嗯。我这块先写个文本吧，你比如说会有很多，比如说有嗯有a.GS有b.GS有c.GS然后呢，我们还会用到呃不同目录下的，比如说img下边的，比如图片，呃a.NG对吧？呃b.PNG还用到了比如说CSS目录下的，比如说呃a.CSS b.CSS。对吧，等等等等，那以以及用到了，比如说呃，a.SCSS对吧，然后呢，比如说B点，嗯，Less等等等等等等等等对吧，有图片有样式，有这些东西等等，那么这些文件在我们项目里边，那怎么能把它打包在一起，怎么能打包在一起。

那就需要有一个什么，我们需要一个呃，安全。叫什么入口文件，比如说假设我们叫做什么index.js这样的一个入口文件，那这样的入口文件呢，就会干嘛呀，在这里边就包含了这些资源。包含了这些资源。等等吧，这个图有点画的不太好啊，就相当于在1TGS包含了这资源，那怎么包含呢？那我们可以使用什么common，嗯。呃，JS里边的，比如说像re eqquire，比如说包含像当前目录下的，或者什么目录下的，比如说a.JS对不对，那比如说CSS，我们。比如说也包含。什么点斜杠下边的，呃，CSS下的，比如说a.CSS等等等等，这样包括图片，我们也是这样的一个资源等等，那也可以使用com JS是所有的支持的嘛，它属于呃note里边语法，那咱们还没学ES呢，学S6的话，Import使用它也可以去包含，比如说from从哪个文件里边，比如说a.GS等等等等，两种语法都可以啊，外派D都支持，那我现在咱们学ES6呢，咱们就用通用GS有可能去包含，这样的话，把这些需要的文件你都放到这里边，对吧，那你看这个像不像一个什么树状的一个结构。

所以呢，这就我们所说的什么数结构，在一个入口文件中引用所有资源，形成所依赖的关系数，因为外派D在找文件的时候呢，它就得按什么按照他肯定只能找一个或者多个主要的入口文件，那其他的呢，文件如果不在入口里，文件包含他是找不到的，就不能把它包打包在一起。那这是树状结构，就类似于这样的一个通过入口文件引入资源形成的依赖关系的一个状图，就叫做这样结构，那什么是模块呢？那模块呢，怎么了？

比如说就是用我们这些可以导入的独立的一些文件，比如说GS文件，对吧，GS文件，图片，SS文件，Les文件等等，那这些呢，对包含的这些资源，这些所有资源，每一个资源我们都可以做的是一个模块。所以在外派里边，图片也看成一个模块，CSI1模块，一个GS文件也看成是一个模块，这就是模块化的一个概念。我们拆分很小的一个这个模块是这样的一个过程。那这些就是这些模块，我们把它组织在一起，按这关联把这些模块组织在一起，形成一个。叫什么？我们叫做C，我这打打字吧。把它形成在一起，就叫CH，什么UK cholk Chu NK，那你可以比如说有一级页面，二级页面，三级页面，你可以把这几个文件打包成一个cho，也可以把这几个文件，比如说在二级页面用的打包成一个，另外的一个cho可以打造成多个，每一个呢有个cho这样的一个名称，打包成多个chop文件。

合到一起。也就是这个打包的过程，就是这个。听懂吗？或者是加载模块的一个过程，形成独立的一个文件的过程，这个，那有了这个talk之后，我们继续干嘛呢。我们还得talk是一个单独的一个文件，最多我们形成能上线的一个真正的一个打包的文件，一个打包的文件那叫什么，打包好的这个文件我们就叫什么，搬走就是什么，呃，比如说叫做ble搬走，就是JS就搬走吧，可以打包成。1.1搬走，GS也可以对应这个。你看再打包成什么另外一个。B2.ds半，那最后形成了这个包，最后压形成这个包，我们就叫做什么这个，那说这两个是什么关系呢？它和它是一个什么关系呢。

类似于对应关系，这只是一个打包过程，那没有对这里边过程进行什么，你比如说这里边儿是CSS进行压缩优化，语法检查，这些东西有可能没做，从这个过程到压缩的打包的这过程，这块有可能我们做了一些什么，做了一些。啊，翻译。优化。呃，压缩。压缩。这样的等等吧，一个过程形成这个，这个只是一个把这些树桩结构合到一起。对吧，那具体的开始压缩运行，真正我们上线运行的是这些文件，是这些文件。所以呢，要知道这样关系，那我们看一下课件里面介绍的。这个是模块，树状图和这模块很好理解了，对吧，独立的一个文件就是不管是图片文件呢，还是样式文件呢，还是GS文件，对不对，那这个呢，就是打包过中被操作的模块，就是talk对吧？被操作这个模块比如异步加载一个模块就是一个超对不对？那搬动呢，就是最后打包后的文件，最终文件可以talk长的是一模一样，但大多数情况下它是多个talk的一个合体，对吧，你看这个1CHO。

看最后生成这个，这是打包的一个过程，那为了优化最后产生的搬走的数量可能不等于这个超的数量。因为可能多个岔口被组合到一起，形成一个什么翻动。不一定是对应的，听懂吧，要知道这样的一个过程，所以有人也总说什么形成这个文件，对吧，就是最终文件也可以那么理解，其实呢，是分布形成的。那这这节课我们认识什么是外派D是干嘛的，我们学生你知道它的作用，然后它的一些工作原理是什么样的，这点我们了解之后，我们在学习的时候就方便多了，如果你不了解，直接去学习，比如说我直接配置怎么压缩GS，怎么压缩CSS对不对，怎么处理兼容性，那你就觉得呃，有点晕晕的，如果你知道它是干嘛的，并且知道它的原理，那我再配置，比如说打包HTML，那你就很轻松的就理解这个过程。

只有理解了咱配中间配置的时候，你才能掌握的印象深一些，不然的话你只有死记硬背。另外呢，还要提醒大家学外派，因为它不是像我们学语言那些基本语法。对吧，他就是给我们配置好这样的一个打包环境，优化的环境，所以呢，你只要按照我的课程学会了，你能配置一个环境就可以了，不用把里边属性都记住，只要自己配置过一遍就可以了，不用去记啊，除非有面试的环节，有可能会用问到你的一些原理和细节的东西。否则的话，你不用去太关注，会用就行，这样的工具知道吧，不用太了解什么底层的，他是怎么工作，怎么写出来的，那些东西都不用去了解，对吧，那配置过程你也不用去记，你只要不用用脑子去背下来去记，你只要把配置的过程，你比如说写好一个笔记，下次我咱用的时候，对吧，按照笔记我就能配置出来，或者我拿别人的这样的一个打包好的一个环境，那我可以去修改就足以了。

我们还是把精力不要放在工具的学习上。要放在工具的使用上就可以了，还是要把精力真正的放到我们写项目的业务逻辑上，听了吗？就相当于。啊。我们学的工具呢，就相当于我们是一支用外派就相当于是一个钢笔，你可以这么去理解，它只是一个写字的工具，对吧。那。学习一门语言呢，就相当于写字，那写项目呢，就相当于写作文，对吧？那我们把精力应该放在哪啊对吧？是钢笔的使用还是字的认识和字能写出来呀，对吧？这些都是基本功，真正我们应该放的是还是怎么去筹划，去规划这个作文的什么内容。对吧，那写出一篇完完整整的一个作文，一篇文章，一篇论文，这才是我们的一个写项目的一个需求。好，谢谢大家，这节课我们就讲到这里，下节课我们开始安装和体验外拍。