Webpack中Loader的pitch方法

一、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处理了)