一、Loader介绍

1.官网介绍：loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

2.简单来说，loader就是将不同语言转成webpack可识别并打包代码的函数，它的执行在webpack打包之前

二、Loader使用

以官网css-loader和style-loader的使用为例：

   

三、自定义简单的Loader

 

   

 

四、串行Loader的正常执行顺序

正常的loader的执行顺序是从右向左的，如下图,执行顺序为：c-loader ----> b-loader----> a---->loader, 也就是a-loader(b-loader(c-loader(resource)))

   

五、Loader的pitch方法

在定义一个loader函数时，可以导出一个pitch方法，这个方法会在loader函数执行前执行。

   

另外，如果存在多个loader串行的情况，这些loader的pitch函数会从左到右依次执行，其示意图如下：

 

   

六、style-loader中pitch的使用

style-loader的作用是将css-loader返回的js符串转成css样式，然后添加到html中。它的导出就用到了pitch方法，原因是因为什么呢？我们知道css-loader最后会导出一段js字符串，里面可能包含需要动态执行的函数。按照正常的执行顺序，style-loader只能拿到这些字符串而并不能把他们转成真正的css代码。因此，在执行css-loader之前，我们需要对在style-loader的pitch方法里面先执行如下代码（已简化）

   

而由上面的loader执行顺序图可知，当style-loader的pitch方法里有返回值时，我们将不再执行剩余的css-loader，这样不就是完全没对样式文件做处理么？这是我最疑惑的地方，后来查到了这么一段话：

   

其大概的意思是，在style-loader的pitch方法有返回值时，剩余的css-loader的pitch方法、css-loader的normal方法以及style-loader的normal方法都不会执行了。而style-loader的pitch方法里面调用了require('!!.../x.css')，这就会把require的css文件当作新的入口文件，重新链式调用剩余的loader函数进行处理。（值得注意的是'!!'是一个标志，表示不会再重复递归调用style-loader，而只会调用css-loader处理了）。

作者：帅气的奶盖
链接：https://www.jianshu.com/p/9dfb8e18e76d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。