美文网首页
Webpack中Loader的pitch方法

Webpack中Loader的pitch方法

作者: 帅气的奶盖 | 来源:发表于2019-12-16 19:52 被阅读0次

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

    相关文章

      网友评论

          本文标题:Webpack中Loader的pitch方法

          本文链接:https://www.haomeiwen.com/subject/chpdnctx.html