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

上节呢，咱们已经生成了我们想要的一代关系图，那么这节呢，我们就根据这个一代关系图来生成我们最终打包的资源。我们要打包的资源呢，无非是一个JS文件，所以呢，我得输出这个JS文件，而这JS文件呢，我得先构建这个文件内容，对吧？最终呢，再通过FS文件系统将这个文件内容呢，输出成一个GS文件，那么就OK了。好，那么接下来呢，我呢，把这块内容呢，定义成一个方法，我们来开始。现在再定一个方法，叫generate。那么它就是一个构建输出资源的一个方法。好在这里面呢，我们来看资源怎么输出，我们他接收呢，这个dependence graph，那么我们来看啊，在这里面的调用这个方法，第4.generate。

把这个一代关系图呢，作为参数传进去，那么内部呢，使用它去操作啊OK。好，那么接下来呢，我们重点的就是定义这个模块，我们需要定义一个我们最终输出的B。那么它呢，是一个JS文件啊，我们在这里面来购来生成这个JS文件的相应的内容，那么整体呢，得是一个匿名函数啊，匿名自定函数对吧，这个方程那么代表这个模块啊，我们得去实现这个，其实定义这个JS文件最关键的目的啊，就是我们呢，首先第一步需要将我们的这个所有的依赖呢，得注入进来。所以呢，它这里呢，会接收到这个参数啊，我们呢，需要把这个参数注入进来，而注入进来呢，因为这是这是一个字符串代码嘛，所以我们得。

使用那个啊魔法字串语法。点string法将我们的这个东西呢，注成一个字符串啊，最终它执行的时候呢，会把它转换成会把它转换成我们想要的对象方式，所以我们需要这样先写一下，OK，那么写完之后呢，还不够啊，还不够，在这里面呢，我们呢要去使用这个依赖关系图加载里面的入口文件，我们应该从入口文件开始执行，OK，好，从入口文件开始执行呢，我们啊要做的无非就是。来。拿到这个入口文件代码，我们定一个依赖函数啊函数。第一个是快函数对吧，好，它这里呢，接收一个我们想要的model。好，那么我们的一上来第二一块函数，我们需要传一个入口文件啊，传个入口文件，那么所以这个入口文件那不就是this.options点取嘛，对吧，这就是我们的入口文件呗，好，这里面呢，就会接收到这个module入口文件，然后开始执行，那么要执行的是里面代码，执行里面代码的话呢，他要做的就是。

嗯，使用这个船价的dependency graph。然后从上面呢，诶大家知道啊，它的一个结构啊，我们来回顾一下，结构呢是一个对象，对象呢key呢就是文件路径啊文件路径值呢是个对象，对象里面代码呢是这个扣的，那么我往下走，那么我们呢，这里就将这个entry entry呢是入口文件路径，所以呢，我们中括号这个model。对吧，那么它呢，实际上就是我们的想要的这个文件路径，那么文件路径上面的点扣的啊，就是我们代码，就是我们代码，我们要执行它要执行一段字符串代码的话呢，我们得使用一个E函数啊。

那么这样呢，就能执行这个代码了，对吧，就能执行这个代码了，的确到这里呢，你看整体流程就是我们定义那个匿名执行函数对吧，确保里面代码呢，它是只有自己能够操作好，把我们的所有代关系统的传进去，传进去那里面就可以使用了，同时呢，我们定义那个require函数，它接收一个路径作为参数，里面呢，去这个依赖系统中找到这个相应的这个模块啊，要执行它代码，执行代码呢，我们通过E去执行，OK，那么你这样呢，就能执行这个入口文件。但是呢，执行入口文件呢，我们前面也解析过这个入口啊，那么我们前面来看一下我们解析的一个样子啊，那么代码呢，就在这解析的这个入口文件的代码呢，就在这一块我们可以复制过来啊。CTRLC。

好。那么我们把这个代码拿回来。好，注意这个是index这个代码。好了，那么在这个代码中呢，它执行的时候，它又会调用require对吧，又会调用require，那么也就意味着它呢，又会执行这一个函数，对吧？因为你这里执行代码调用require，它就会去上一层做域找嘛，找到require去执行，但是这种执行require呢，你看注意看啊，这里面呢，很明显是最终会得到require的一个返回值的。会得到一个require范位置，而我这里呢，必须要return出去它这个东西，而这个代码呢，肯定不是在require函数内部执行，应该是return出去，在外面去执行。

所以这里呢，我们得改造一下，所以这一块呢，不能这样写了，这第一部分啊，第一部分呢，你这样写，那么第二部分呢，我们就得改造一下。OK，在这个函数内部呢，我们再定义一个块啊，这是函数内部的一种方式啊。Local。Very hot。好，然后内部呢，我们啊，最终呢，需要做的事呢，就是在这里定一个匿名函数啊方式。他接收三个参数，没REQUIRE2IS false，还有我们的这个code，还有代码。好，那么接着这三个参数呢，我就要传这三个参数呗，第一个require require呢，我这里第一个local require，就用这个local require OK exp，那就是ex exp code的呢，就是我们的用户代码是哪个呢？诶就是我这个代码。

对应上就是我的这个depend dependence is graph module里面的是code的，好，这里面local require，能不能找到it呢？没有对吧，所以我们得定义exp。它呢得是空对象，因为是model啊，Model或者等一个对象去暴露，好这个require呢是。那我们写的注释啊，首次的require require函数目的啊，其实它这个目的呢，就是为了加载入口文件。所以我们一上来就加载了入口文件。对吧，好，接着呢，再定义一个，定义一个模块内部。的require函数。就是我们模块内部，也就是说我们的入口JS index JS里面，诶，它里面的这个化函数啊，那么它实际上呢，会找这个，我们呢，把这个代码呢在这执行。