31-尚硅谷-webpack从入门到精通-自定义webpack：生成bundle（下）

执行代码在这里面呢，传入我们的code就可以执行代码，所以我们来看一下这个匿名，这里面有个I fe匿名立即执行函数，我们来看啊，它呢无非就是一个函数，这样的时候呢，将require code呢给传进去，那么我们就传入了第一个code，第1CODE呢，说白了就是我们的这个入口JS文件对吧？传入的这个好，传入这个之后呢，内部就会执行代码，执行代码呢，因为作用关系，所以这个代码里面的require和port呢，就去上面找我第一次传的port空对象啊，那么后面的就会去里面找了，去内部找了。OK，好，他找的时候呢，会去，然后又会去执行require require的话呢，就找的时候local require，通过local require去下载，所以local require呢，它同样的会接收到一个一个啊模块啊一个模块，OK，那么就这个模块呢，我这里叫return，会去这个模块的内容啊，对吧？所以这里面写法呢，一样的写法值，它实际上呢，Return就是也是需要我们最外层的这个require去掉，好但是呢，我们这个modu啊，就得去找到对应的这个模块的具体内容了，好，我们这个local require呢，它的目的是为了引入我们的相应的文件，那这个文件呢，应当去依赖着，因为他写的路径呢是一个相对路径，注意我们的引入的文件来看啊，是点斜杠add.gs是个相对路径，所以我们要想办法去deep gras里面去找的这个相对路径的这个内容，诶，那这怎么。

好呢，注意啊，这里呢，我们来想一下，这里它接受的是个相对路径。对吧，他得去找到这个绝对路径，那么作为返回值，这样才行啊，他得找到这个绝路径，OK，那么找绝路径啊，我们得这样写啊，首先呢，d.gra中框model，它能找到我们之前的那个入口JS文件，对吧？然后呢，再去点depends，那么找依赖，依赖呢是一个对象，对象里面再中化re pass，返回值就是绝路径了，所以这个函数其实的目的呀，它就是这样的，为了找到这个绝路径，为了找到对吧。

当前模块，其实它的目的就是为了找到当前模块的节路径，要引入模块的路径。再通过require数加载进来，好，但是你通过require加载呢，Require就得有返回值啊，这个require函数就有返回值，所以最终呢，我们这里呢，要return这个。Return这个exp才行，那么这个exp呢，是我们定义的是定义暴露的一个对象，暴露对象暴露，所谓暴对象呢，就是将来我们啊，我们要暴露的内容呢，都是会这里面将来模块要报的内容啊，那么把它return出去，返回出去。

作为require函数的返回值返回出去。返回出去的目的就是为了干嘛呢？为了后面的化函数啊，是能得到。能得到我们需要报的内容。我话函说好了，那到这里呢，就基本上整完了，我们整个流程我们自己来整体过一遍，首先呢，我们定的匿名I fe模式，匿名立即执行函数，对吧？将这个所有的依赖过系图呢给传进来，那么这里面代码的是私有的对吧？OK，我们定义的第一个require函数啊，然后呢，传入了这个入口文件，所以在内部呢，它会去通过这段代码去执行这个入口文件啊，通过depend graph找到这个代码，然后在这里面通过一函数执行这个入口文件，好执行入口文件的时候呢，我们能知道它呢，会去通过require来看啊，会通过require函数的再去加载它相关的一些依赖，好这时候怎么解析呢？好，这个require函数呢，实际上是local require是这个函数，它接受那个S作为相对路径，然后再从depend is graph里面呢去找到相对路径对应的绝路径，再重新调用块一个地位调，当你重新调用块的时候呢？注意这时候传的是那个S的解决路径。

所以呢，他都会去做di.graph里面呢，找到这个ands这个路径，它里面代码，然后再去执行，然后再执行的时候呢，那么这里面呢，又会去啊，如果还有如块的话呢，又会去找到他依赖的依赖啊，从我这样一直一直反复的找下去，最终呢，就能保证所有代码都能执行了。

OK，那么这个B呢，定义好了之后啊，那么后面呢，我们就可以去操作了，这就是我们要输出的文件，所以我们通过wis的一个方法叫做rise，当然FS我们得引进来，诶我们上面呢，看一下有没有引入FS，诶这里要引入一些FS啊好，这些代码呢，刚刚有些多余啊，我们要删掉引入FS，好下面呢，我们就要通过FS点入f file。Think去写入的文件，好，第一个就要写入的一个文件内容是什么，那么写入文件内容呢？我们定义一个输出文件的路径啊。那么这里面呢，我们得用pass模块来去操作一下咱们的路径。对吧，好来下面那么找到pass模块呢，我们要说这个绝路径嘛，那么绝路径的这个内容呢，应该就是我们的this点。

options.output啊，我们有个输出，输出呢有个pass对吧，主动机呢，再加上this.options点这个UT，它上面的对应的我们想要的这个路径，也就是说。我们的这个file name。那么由它来组成一个绝对的输出路径，那么这个呢，就是我们最终的文件输出路径了，啊文件输出路径了，好。OK，那么输入结果呢，输入输入的内容呢，就是个豌豆。对吧，那么我们呢，是一个字符串的形式啊，所以这里还是写utf开发。好了，那么它最终呢，就会去输出文件，这里呢，是生成输出文件的解读镜。

然后呢，使用FS去输出文件。写入文件，那么将我们前面的内容呢给写进去，那么就完成了。好了，整体呢，我们就写完了，我们可以看一下效果啊。我们呢，这里面呢，什么也没有啊，我们再来执行一下这个代码。输入NPS软的。好，他就会开始打包啊，这时候呢，报了个错啊，我们来看一下是报什么错。他说呢，这个第这个啊，Direction没有啊，所以这里面呢，我们可能需要手动的创建一个D，创建一个Dis木啊OK，那么我们再去生成。再打包A，这时候呢，他就没有报错啊，这时候我们去看D子目录A就会多一个man.JS这个man.JS呢，就是我们打包号的些代码啊，整体的过程呢，就是它呢会把所有的一代光系统都给注入进来，注入进来然后在这里面呢开始去使用啊，它呢首先呢会去引入这个啊，咱们的这个入口JS文件，那么注意啊，这个入口JS呢，这里如果这样写的话呢，我们可以想象它肯定是执行会失败的，所以我们这里呢，还差一步啊，还差一步，我们这里引入的呢，需要加一个引号啊，我们这个路径呢，还是要加个引号的，否则的话呢，它解析会出问题啊。

加个引号，OK。我们再看，再看，再执，再构建一次。好，再看啊。那么这里呢，它就会第一步呢，会加载这个入口JS，加载入口GS呢，就会执行里面代码，通过这个f fe模式呢，它呢会去找到入口JS对应的代码，然后通过一我函数去运行这个代码。好运行的时候呢，接下来它就会读取通过require呢去加载相应的其他代码，那么require呢，就local require，这个local require呢，就是为了根据我们当前模块，通过它的依赖找到对应我们需要使用的依赖的卷路径，那么它会返回出去，对吧，返回出去同样的调快那个地位调用，那么require里面呢，又会通过E再去执行这个代码啊，那么最终通过export将这个代码呢给暴露出去，整体的内容就是这样的。

所以我们呢，如果要验证的话呢，就可以在这里新建一个index ma文件，然后呢，把这个内容呢给加载进来啊。通过标签将这个面加载进来，我们验证一下，看一下它最终能不能在流览器端运行，如果可以，那么我们就搞定了，对吧？好，我们来检查一下。探索诶这时候呢，我们刷新就能看到他打赢三和二了，OK。