其他分享
首页 > 其他分享> > Webpack中Loader的pitch方法

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



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

标签:style,执行,loader,Webpack,pitch,Loader,css
来源: https://www.cnblogs.com/ygunoil/p/14340261.html