12-尚硅谷-webpack从入门到精通-loader基本介绍和使用

好，同学们，接下来呢，我们研究的是wepa的一些配置，我们要研究load的一些使用对吧？以及插件的一些用法，最终呢，我们再去探讨这个we pack的一个原理，好，首先我们先从loader的应用开始啊，那么loader是个什么呢？咱们呢，在写样式的候，我们之前看配置的时候有见过什么s loader s load啊，处理一些样式文件的，对吧？那么load呢，其实在PA中，本质上呢，它是一个函数啊，那么最终呢，我们wepa在使用的过程中呢，它会调用这个函数传入指定的要处理的一些文件，然后呢，Loader呢，在这文件进行处理，然后并返回回去交给we pack we pack呢再去输出。所以load在这过程中呢，就是对文件呢，做一些处理的这样的一个函数，所以下面呢，我们就自己大家写一个loader来感受一下这loader到底是怎么回事啊好，我们新建一个零三。叫loader点啊，这个文件在这里面我们研究wi pack的一个loader，好在这里面呢，我们新建一个wipa con JS啊在这里面呢，我们需要写一点外派配置，然后呢，并且呢要下一些包啊，所以呢，我们把包呢先下载一下，那么我们要手PE呢，自然就要下载wipe和wipe CI这些包啊，好先下着，不用管它。

好，接着呢，我们再写1.WiFi配置，那么现在呢，我们的环境啊，实际上已经到了派五了，在今年的十月份的时候呢，那么wi派D已经升级到五的版本，所以呢，我现在下载的wepad是五的版本，那么五的版本呢，它默认是有一些entry和一些output配置，所以entry和output呢，我是不用写了，那么我最基本的就是直接写modeldu，对吧？然后上面的Rose外派这些规则的配置在这里面呢，我们来写我们的load OK，那么load呢，我们写啊，所以我还得再写一个，我呢新建个文件夹就叫loads。在这里面呢，定义我们的loader啊，我呢新建一个文件叫LOADER1吧，loader1.gs，那么这是我的定义个测试loader，而load呢，本质上是一个函数啊。

本质上是一个函数，所以呢，我们就是直接去定一个函数就OK了，所以它向外暴露出去呢，也是一个函数，Mo p的一个方式，这个函数呢，接收三个参数啊，第一个呢是文件的内容，那么第二个呢，是文件的那个source map的一些映射，映射信息，第三个呢，是文件的一些源信息啊好好，那么我们可以打一下这content就能看到这个文件的内容了，那么返回值呢，就是交给下一步他们要处理的东西啊。Return的内容呢，就是他接下来呢，要返回出去的内容，那当然了，我现在这样写的，实际上这个文件的啥也没处理，但是我们接下来就看这个loader呢，它会不会执行，以及这个可能信息呢，是不是我们想要的，OK，那么这里面呢，我们要使用上这个loader，对吧？那么这里配置就这个对象，我们比如说检测的文件呢，就是JS文件。

我们检测的以DJS结尾啊，处理JS文件，然后呢，使用的load呢，我们要把这个路径写完整啊，那么要写个路径呢，我这里要引入个模块叫pass对吧，Pass模块来处理我们这个路径问题。好，然后呢，通过passor方法来生成一个体路径，那么杠d name当前文件夹路径，然后找到这个load目录，然后呢，我现在去找这LOAD1这个点JS啊，其实这LOAD1就可以了，OK，那么这里面呢，它就会使用这个loader啊，当我运行wepe这个指定的时候呢，它就会去做了，当然前提是呢，我们得写一点文件让这个load呢去处理啊，所以呢，我新建一个文件夹src，默认情况下呢，咱们的外派五这个东西呢，它会去src下面去找inex JS这个文件去打包啊，打包的默默认是Dis，点打包到Dis什么东西啊，所以在这里面我们稍微写点东西吧，就打一个CL点诺。

打印一句话吧，哈喽。OK，那么这里面呢，就是我们就写好了一个非常简易的load啊，当然这个load呢，并没有做什么事，我们主要是通过它打印信息来获知一些信息，OK，好，呃，这里的包也下好了，我们来运行PS wi派。好了，那么能看到这里啊，你看那么它打印出来的这个看lo hello，所以呢，这connect呢，其实就是这个文件的信息啊，然后呢，这是输出的结果，输出的一个魅JS，它的大小的是298S啊，然后呢，打包的一个入口文件呢，就是SSC点1SJS也是29Q为我这个文件呢，啥也没干啊，所以呢，它就是怎么样引入怎么输出的啊，所以我们来看输出的文件D层目录下面有个many je，其实它啥也没变啊，啥也没变。好，那么这样呢，其实就是个最最简易的一个load的写法，当然呢，我们现在呢，还不具体写功能，我们要研究里面的一些基本信息，对吧？好，所以呢，Load总结总结成的就是一个一个函数啊一个函数好那么这里面呢，还有一个问题，就是我们写load的路径啊，感觉挺麻烦的，这样写对吧？所以呢，他啊咱们的那这啊派呢，还有个选项叫reserve啊，我们来看。

叫啊。这个选项，那么这个选项呢，就是去解析load的规则，其中有个modeldus啊这个选项，这modeldus呢，就是只是我们load呢，去哪些目录找啊，Model的情况下是no MOS啊。这也是为什么啊，咱们呢，去写log的时候，可以直接写什么load，他会直接去no，因为这里呢指定呢他去no长这是默认值，那么我们呢，希望他去这个我们这个load目录场，对吧，所以我们要加上我们自己的目录pass。啊，刚刚d name找到这个lotus找啊，当然这个loadus呢得加个引号啊好了，那么他呢就会去默认也会去啊load models找，找不到呢，去loads里面找，所以呢，我们这就可以直接写这个LOAD1了啊LOAD1了，那么它自己呢会去loads整录里面找啊，所以这里面的配置的是load的一个解析规则。

啊，Load解析规则，那么下面呢，自然就是load的一个解析啊，详细解析的路径了，所以啊，我们来看效果啊。看运气。诶，它同样的编译呢，有successful成功了，最终输入结果呢，当然也没有变化，但是这样写的都很明显，就是我们将来写路径呢，可以更加简单，不用这么复杂好了，那么这就是load load的一些基本内容。