33-尚硅谷-webpack从入门到精通-webpack详细配置之entry

接下来呢，我们来学习的一个第一个配置啊讲那么这里面呢，我们要研究它的一些详细的一些配置方案，我们打开这个code。因为上一次呢，我们的最后一个是28啊，我们这儿呢，就跟他来从29开始。叫en。我们研究这个entry的一个具体的配置方案。好在H下面呢，我们新建个配置文件JS文件。在这里面写上我们相应的配置啊好，那么我们呢都知道啊派呢要求向外露数据一个配置对象，对象这里面呢，写上几个配置，比如第一个ENT就是我们要研究的。那么最经常的写法呢？我们是写成一个字符串的形式啊。也行。C、下面的industry。然后呢，还有一个输出叫做output，指定我们文件输出到哪里去。里面有几个属性，比方说。指定文件名叫什么？比方说。好，第二个呢叫pass对吧，指定我们输出的这个路径是什么，通常来讲我会传播绝对路径，绝路径呢会通过方法拼接而成，那么输出到B下面。

那么在这呢，就得引引进来啊。来自于我们的pass模块。OK。好，接下来呢，我们再来一个插件啊，因为待会呢要在网页中应用。要看看它有没有效果啊，所以我们去试用插件叫HM拍开PA。那么它会帮我们生成一个这样的网站H文件。好，如果你传到table，它会以某个文件为模板去做，那么这里面呢，我们不需要写H文件，就直接写，直接写的话呢，它会自动的帮我创建一个H文件，当然这里面的结构是空的。哎，刚好我们也不需要结构，所以呢，这样就做就足够了啊，足够了，所以我们这里就不写那个table那个选项了，我们不需要结构啊，只要创建一个空白的HM文件，引入这些打包后的资源就可以了。

好，那么这个HM呢，是需要我们引入的啊，所以呢要注意。最后呢，我们通过模式mode啊去调一下这个模式，为了看到里面的源代码，我们要调为开发模式啊才能看到源代码，千万不要调成生产了，生产代码一旦压缩，那我就不知道购机后的代码里面到底有什么内容啊，即使想看也很费劲啊。好，所以呢，写到这儿呢，我们就完成了个基本配置，它能够打包这个入口文件，诶会生成一个HL文件，将打包后的这个BDS自动引入。那么我们最终呢，只要运行它这个打包后的这个文件就够了啊。开发环境是为了让我们能看到具体这个啊，生成生成的JS文件的具体的内容的。那么下面我们在这里面建个在这里面写我们项目的一些GS代码。新建文件JS在这里面呢，去写一些基本内容啊。

那我们就打印一下吧，就咱们文件。加了啊。OK啊，就够了啊，我们就不写太多内容。然后在这里面呢，再新建个文件，比如说叫ADD方法。对吧，在这里面写个方法。SYSY，然后呢，一个S加Y。对吧，一个非常简单的一个处理啊，咱们呢，不用写太复杂，主要是验证这个我们的配置啊，暴露出去。再新建个模块吧，比如说这看啊，我们就来两个模块来看看。风。Count。减法嘛，SYS减Y。然后呢，最终呢，露出去default这个。好，那么就好了。最后呢，在中呢，把这两个方法引进来，Import这个a from。

Imposs from the counts。OK，那么下面呢，我们就简单调试一下他们啊，用那个一加二吧。再调这个can。那个三减二吧。OK。那么到这呢，我们就将一些基本的JS代码呢写好了。那么现在这个问题就是，诶，我们通过term打开啊。请问一下我当前的配置呢，只有ESJJS作为入口，待会输出的时候，请问会输出几个JS文件呢？诶，给大家十秒钟想一想。哎，它只会输出一个啊好，这里面呢，我们可以写一下啊。我们要做的是这个ENT啊入口。那么它能代表入口文件入口起点。对吧，它的值呢，有三种情况啊，我们先研究第一种值。

进入了d string，好，我们来研究一下，执行指定PE，它会启动我这个配置文件，输出去呢，它会输出一个标DS啊，这个呢是那差距生成的啊，当然这里面呢，没有任何结构，只会引入这个JS文件。好，我们可以打开builds里面往下翻。这里面呢，按道理的话呢，应该要引入这三个文件资源to资源，还有就INDEX3个文件呢，全都在这里面了。所以呢，这种方式呢，我们啊是这样说的啊，它的值呢，通常写法呢，是指定一个JS文件作为入口，这是我们最常使用的方式。那么它的特点呢，就是啊打包。生成啊，打包形成。一个串口啊，所有文件都会形成一个串口，输出一个扳啊，输出的资源呢，我们叫B，这B呢就是这个标S是这个文件。

输出一个B的文件。好了，那么这是它特点啊，大家也清楚了啊，就是我们的这个单入口的话呢，只会输出一个文件啊，只会输出一个文件。OK，那么。我们还记得吗？在这个file name这里面呢，我们会传一个name啊name。是不是当我传个name的时候呢，那它输出的结果应该叫什么名字呢？诶这时候我们看一下这个输出的一个内容啊。做内容的时候呢，这里有个。区域，其中它会告诉你输出的串口，这个名字呢，在这里写的很清楚啊，创口的名字呢，叫做may。所以这里面大家清楚，就是此时啊，这个创的名称是是叫做may啊，默认加面啊默认加面。就是你不管你写不写，它默认值就是了。就是么，所以我们如果再输出啊，再输出我们把S删掉啊。再输出的话呢。再执行派。它的值，它的JS么，就叫main了啊，就叫main了。

所以这样写法呢，它的这个打包后的这个串口的名称啊，它会叫做may，要注意啊要注意。好了，那么这是第一种写法，这是第一种写法。我们再看第二种。第二种写法呢，是作为一个数组，这里面可以传多个JS文件，比如我们再传一个JS。啊，比方说我这样写。好，这样写的话呢，要注意啊，这样写呢，前面这种我们叫单入口。对吧，这种呢，也就叫多入口。但这种多入口有特点啊。有个特点就是啊。所有。它会引入啊，比如说引入所有这个入口文件。最终。一个窗口啊。就我这个index和ADD，它最终其实只会形成一个串口啊，那么输入数据呢，就只有一个。

发的文件。好，怎么证明呢？我们可以演示一下，比如说打开源代码。我们把这二呢注释掉。我注意我没有引A啊，这个A呢，是在we中作为一个数组的入口文件引进来的。你亲爱的啊，就正常多入口的话呢，它应该输出两个JS文件两个啊那不好意思，因为这里面呢，我们用的是这样的数组的方式，所以虽然是多入口，它会引入这两个资源，那这两个资源呢，最终都会被打包到，打包到哪呢？打包到第一个这个JS文件中去。好，第一个JS文件呢，它默认了也是叫may，也是叫may。所以我们来看效果啊，一起。好，直接结果你会发现它还是叫面JS，这个我们再看面JS啊。往下。它这里有个就是多入口呗，它有个s index和这时候再去看index也有。

Cant有，因为cant in代引入了cant，所以cant有再往走，诶还是有at这个方法。所以这种方式呢，也可以作为多入的打包，但是这种多入的口打包呢，它最终只会形成一个饭盒和一个半斗。这是这个，所以要注意一下，所以打包的时候我们看的很清楚啊，它形成了一个这样的创口，叫做may啊，也是叫may。那么这种有什么用呢？对吧，这种有什么用呢？哎，这种只有一种用途啊，就是我们再去写那个，哎还记得吗？咱们在做HMR功能的时候，我们发现咱们HL文件不能更新了。所以需要在这里把它引进来，引进来之后呢，咱们的这个外派呢，就能对它进行处理。处理的时候就会进行热更新，所以这里面用途呢，只有一个就是。啊，只有在那个H中啊，一般来讲啊。大家只有在那个H中。

就是这个啊。所以呢，一般来讲我们不会用第二种方案，那么要用的话呢，就是在开发环境下，让HM功能H的认可期生效啊，就是这样的。所以要注意啊，要注意。那么第三种是对象形式，对象形式呢，我们写一写。找对象呗。啊，再把它改成对象就好了啊。然后这里面会有个key，有个value啊，是一个名称，Value是这个啊。那么这个key和value啊，我们说了这这种呢，叫做多入口对吧，入口。口的特点呢，就是有几个。入口文件。就形成啊几个串口对吧，同时啊同时输出输出的话也有几个。

就这样的。然后呢，此时还记得啊，这个的这个名称啊，是这个叫什么。我这key叫index，那我这串口的名称呢，就叫index k叫ADD，串口名称就叫A。所以我们还要把必要的再删掉啊。把别的删掉，再构建一次。因为我这个多对象呢，是有传了两个参数的两个参数。我们看它输出了这两个t name呢，这个叫A，这个叫index。所以再打开来看的话呢，这里会输出两个JS文件啊，两个文件。这种呢叫多入口打包，多入口打包啊，就传object。所以通常意义讲呢，我们第一种和第二第三种用的比较多，第二种呢，是针对于特殊情况才会使用的。那么第三种情况下呢，就是针对多入口去做的啊，第一种呢是针对单入口啊，我们在讲代码分割的时候也讲过。那么最后呢，还有一个特殊用法啊，不知道大家还有没有印象。

啊，特殊用法啊，不是内鬼啊特殊用法。好，这用法呢，就是这里其实可以传。一个数组的啊，传数组，比如说来个点斜杠C下面的点S。好，这时候我们再看啊，我们呢，拿到一代S。拿到这个SC下面啊。我呢就是爱的引进爱呢我就不引了，看我也不引了啊注意我爱的看都不引了，有正常情况下呢，我这里面呢，应该是不会有爱的看的。对吧，然后我们再看，那这种数组的方式呢，其实就跟第二点一样，它会把indexs和S打成一个。ADD呢，会单独打包，所以最终呢，输出的文件呢，还是有两个，有index和ADD，只不过index文件中呢，既包含index也包can ADD中呢只有A。来看效果啊。这些。

出结果还是有A和index，我们打开index看一下。Index里面应该包含两个东西，Index和count，我们来看index文件和count文件，再往上走就没了啊。A里面呢，就只有爱往下翻。就只有爱这个东西没了。所以呢，这种方式呢，就是啊干嘛呢，这种方式就是如果你要将多入口，同时呢，多入口的时候，要将多个东西打包成一个串口，可以用这种方式。收发是。好，这种方式呢，就是。对吧，啊，这个这种呢，就是叫做啊。多个文件。所有入口文件会形成一个串口，输出数据一个半的。啊，这种呢，就是啊。输出形成一个串口，输出一个伴奏。啊，就这样的。

那么这种特殊用法在哪里见过呢？哎，我们在写deal的时候，不知道大家有没一下deal的时候就写过啊？要的时候我们对主的处理的时候呢，它就是jary啊，值呢为一个数组的一个数组。啊，我们可以看一下，我们看一下。他第二。你看在这里我们就是这样打包的啊，这块只为一个数组。这样写的好处在于呢，就是将来比方说我要我要打包对吧。那我可以把还有。对吧，还有比方说rest常用的库rest do对吧。最后呢，可以单独打包成一个串子。而不用拆分成多个包，多个包啊，这样呢就好一点，这样就好一点啊，所以呢，我们可以这样做，可以这样做啊，那现在我不需要，现在不需要可以给大家注释掉啊。就是呢，这样做的话呢，可以将多个文件打包成一个串口输入出去。所以呢，也可能我们会这样做。

那到底怎么做呢？就看你到底是要形成，是形成多个几个版本文件，输出几个文件了，一个就单入口，多个呢就多入口。那么如果你要将多个文件打包成一起，那你可以用数组的方式，如果你一个文件111个呢，那你就就直接写呗，对吧。啊，这是这个啊，这是这个。所以这以上呢，就是我们整个entry的一个用法。那么最终呢，我们还是啊，在单入口用的还是最多的啊，所以大家呢，必须要掌握单入口的用法。好了，那么到这里你们清不清楚这个entry的一个配置呢？我们听一下。