Web前端框架通用技术 webpack5 5_多入口和多出口的情况配置 学习猿地原创

大家好，我是学习园地的特约讲师高果，上节课呢，咱们看了web pack的五个核心的配置项，那这节课呢，咱们就逐个配置项来学习，结合咱们打包不同资源，然后一个一个的涉及到，那首先呢，我们肯定是从上往下来看第一个。那第一个安全，也就是ENT这个，那我们可以做多个入口和多个出口的情况，也就是在我们这里边，如果默认我们只有一个入口的话，用一个字符串作为这个JS安的值就可以了，所以呢，这是一个入口的情况，这块写上。如果只有一个入口。使用字符串。字符串也就是指定。一个入口文件。也就是我们所说的什么单入口。关入口这块，那它为什么呢，它会。

打包只打包一个什么一个。Trunk。和输出一个，和输出一个什么按钮。这文件，那这个生成的。这个名字。Talk的名称。是默认的啊。这个我们编译之后，你看按这个名字去指定的默认的，因为只输出一个嘛，对吧，这是一种第一种用法。那如果我们写有两个入口呢，那他说什么叫两个入口啊，你比如说。一个是前面咱们说的in.JS这个文件，对吧，那如果我在src下这有呃，One two three这个名称，那我这边再起一个，比如说我这里边做一个。呃， GSa.GS里边呢，我就是反一下。

这是。这是A文件。我直接就随便打印一下了啊，然后呢，我再做一个文件。呃，GS文件b.JS然后。这是B文件，点rog你看。这是这两个文件，那比如说在B文件里边，我们re return包含谁呢？包含A这个文件。包含A的文件。那这样的话，B文件就在这儿了，然后呢，比如说我们这里边有另外一个入口，那我们再再新建一个吧，但是你不一定说呃包含几个，那比如说这个B文件，我们就当成是一个另外一个呃入口文件了，再再写一个吧。假如说我们叫做。嗯，入口文件一个是叫index，我们叫m.JS。这块我在这里边，呃一块包含什么呢？包含这里边儿的呃，B。

当前。包含这个文件。旁边我们这块打一下。嗯。这是。嗯，一个入口。呃，一个ENG吧。2ROG里边代码你是什么都可以啊，然后互相包含就可以了，你看这块作为一个入口文件，现在呢，我有两个入口文件对不对，那两个入口文件我怎么办呢？所以我在这块。这两个入口文件里边包含的文件，有的是可以是交集的，有的也可以没交集，这几个呢，一个是包含one two对吧，一个包含A对吧。它现在是没有交集，当然Y和A之间的，他们也可以是有交集的，这边不用管了，根据你项目的情况去设计，那如果我这块是单入口，那我这块可以写一个。什么呃，多入口，多入口呢，可以是数组的格式，Entry这块是数组的格式，那使用这种方式数组的格式。

那使用数组的格式呢？当然了，你可以。写一行敲开单行都可以啊，这个是无所谓的数组的，我们就可以写多个值，一个逗号，用两个隔开数组多个值，那这里边我们第一个是src下边的，比如说原来的inex.G然后这里边呢，我们是当前目录下src下边的我们叫做manin.GS你看我是不是就把两个入口对吧，都加到这里边来了。所以呢，这块我加上注释，这块呢是数组的格式。A，数组的格式可以什么多入口？可以写多个入口文件。写多个入口文件，当然有三个四个都可以了，那所有的入口如果写在数组里边，所有的入口文件会形成一个错，当然了，这个我已经跟大家说了，它是什么概念对不对？所以就不多说了，形成一个它那名称呢？

名称是。默认的多个，这里边会形成一个，它形成一个cho对吧，那最后名称是它也就这里边指定的这个，你看到了吗？然后呢。嗯。他们的输出也是一个什么。输出。也是只有一个，就他们合在一起，虽然两个入口会打包成一个文件，一个什么，一个班组。B。你看一下我这块运行一下啊，我把这个删掉。啊，把它删掉。派。好，这没出错对吧，你注册就成功，你看我们在这里边。是不是还是这一个文件，只不过在这一个文件里边，你看这里面有什么，a.JS有吧，对吧，b.JS有吧，往下看。万点进S有吧，Two点进有吧，对吧。是不是全在这一个文件里边呢？当然在文件，你可以去no de运行，对吧，或者在HT里边使用运行，这个是build下边的bil ld.gs你看这是A，这是B，对不对，这是一个这个结果120这几个都可以了。

你可以在这里边去使用这个就是数组的这样的格式，那它还有一种格式的写法。这个消费一下。还有一个什么，就是obj CD，对象的写法，对象的写法。那对象写法怎么写呢？也是en ENT，咱说这个格式字符串只能写一个输入法啊，别写错了，如果写字符串只能写一个写数组，你可以写多了对不对，那现在它有一种对象格式的写法，对象格式写法那可以敲开，那既然对象写法，那就不是说像数组似的对吧？对象呢，你可以指定下标了，那比如说我这里边。提一个下边叫做啊走，随便写吧。

指定下标，它的入口呢，是什么呢？是src下是当前目录下src下边的呃，index.js。这个然后。点斜杠src下边的两个入口嘛，随便起的名是manin.JS，你看这也是一个阶层的格式对象嘛，阶层的格式写两个，那他打包，为什么呢？这个也是什么，也是多入口。也是个入口，那有几个？入口文件有几个文件就会生成什么，几个fo是这个，并输出几个。关注。你看啊，不是说像数组似的，所有的变成一个CH一个班组，这个呢有几个文件，就是给班组，那名称是什么呢？你看我们这里边打包成一个名啊，对吧，那这有两个文件，他说有两个班豆，你都叫他一个名。能行吗？对不对，不行，那名字是什么呢？名字是它的下标，就是我们的类似于这里边的输出的文件名。

所以说这块。Cho的名称是什么？是K，也就是这个下标，那我这块用一个固定的名称这下标，这能行吗？不行，所以呢，这块我们需要把它改掉，改成什么呢？用个中括号里边相当于用一个变量name。这个name就是是这个入口文件生成的豌的对吧，打包的名字，那就把one放到这儿，就是one.js是这个文件，就是to two.js有几个它就会生成几个文件，然后文件名就用这个下标名是这个意思。来我们运行一下，我们把原来的删掉。删掉了，然后我们在这里边运行一下。外派。你看成功了对不对，然后我们看一下这里边儿的目录，因为我们没变，输出的目录我们没变，还是什么，还是没对吧，但是这里边。你看有万和土对吧，这回就把它分开了，万里边打包的，你看只有什么这个。

这个万.g s two.gs这些东西对吧，那我们two.gs这个打包的就是a.GS和b.GS对吧，和这个以及入口文件的。以及入口文件的这三个，所以呢，One和two这里边就相当于把那几个包给分开了，多个入口打包成多个文件，所以呢，这个我们就可以在比如说一级页面用的，这个是二级页面用的，我们分开打包，如果打包一起的话，你第一个页面，第二个页面，第三个页面用的都是同一个JS文件，那用这种方式我们就可以让不同的页面加载不同的JS文件。这样的话，每个GS文件都很少，都很小，对不对。这还没压缩呢，你看你分开之后对吧，肯定是变小的，原来合在一起肯定是大的，就这意思。这就是呃，这种格式，当然这种格式我们还有一种写法什么呢。就是。应该叫做特殊格式。特殊用法。那什么是特殊用法呢？就是对象和数组里边混合的这样的一个用法，比如说entry。

阴天外。那怎么个混合法，这里边，因为这是阶层格式，杰森里边放什么值都可以，对不对，比如说我这里边放一个万啊。嗯。万和兔吧。就是呃，万A吧，随便写一个作为下标，然后我们这块写上一个数组，数组里边我们写上。两个入口，你比如写成一个入口，比如说。啊，这里边儿我们写上是。Src下边的。呃，假如说我把谁当成这个入口呢，这个呃。下边看着啊。这里边儿。呃，比如说把这里边儿的manin拿过来。点GS拿过来，再把这里边儿的。啊。Index的点GS拿过来把这俩打包在一起，你看当然得点src啊，点src把这俩打包在一起，因为可以混合在一起打嘛，对不对，然后。

比如说这块To B就跟意思跟是原来你一样的不同啊，代表你叫什么都行，然后呢，在这里边我们可以使用。你看它是本身对象格式吗？我在使用一个单独的一个入口，比如说indexs RC下边的index的点GS，我再把它单独再打成一个。那这个特殊用法什么和上面这个很像？很像。怎么啦，也就是数组中。这个。会把它合成一个。诶。数组中的会把它合成一个。然后呢，单独的这一个又是一个，然后入口呢，也是它的。K作为这个下边的名称。你看这就是混合式的用法，把上面几个可以混合在一起，你可写多少个混合都可以啊，这是特殊的用法。

这个加加逗号都可以吧，来我们试一下，看一下会不会生成。这个ya和To B这样两个，我把这个删掉。然后呢，我们运行一下。好，没问题了，你看这块。在这里边你看出现个Y和To B那。To B这块它只有一个入口了，就是把one two和本身的入口文件你带着JS对吧，还有这个one two打包在一起。对吧，那我看Y这个呢，它把什么a. Gsb.s.g s two.gs以及这两个入口文件，对吧。是不是全放在全打包在一起了，一个文件里了。看到了吧。这就是我们这个用法。所以呢，我们想做多入口的。就可以用这种方法，当然了，咱们后边如果现在每个都用多入口比较麻烦，所以呢，我现在还是把这个打开。还是用这一个入口去做实验。

其他的我给你给你放这了，注释我也给你放在这块。对吧。然后呃，课下你自己去研究一下，做一下实验即可把这个删掉。你看改回单入口了，那这块。它还会有默认的名字。这款。默认。这个木架。这个名字默认啊。我把output我也注释了。有时候默认不应该是用户名的，给我们改。把这裤子这个打开啊，把这香蕉。然后我们再运行一下。你看build的，那默认的名称是慢点DS对吧，默认是这个名称用的是默认的，看到了吗？但是呢，这个目录我们是指定的，所以output这个，嗯，我注释了一下，好，这节课我们就讲到这里。