通过对主要代码扫读,结合分析文章,梳理如下:
style-loader 的主要功能:
- 在dom里面插入一个
style
标签,将css
写入标签 - 在dom里面插入一个
link
标签,设置样式文件链接
style-loader导出一个空方法,实际逻辑方法通过
pitch
导出。所有的loader都是从右到左被调用。有些场景一个loader只关心一个请求之后的元数据,忽略之前loader的返回的结果,pitch方法是在 loader 从右到左真正执行之前,从左到右被调用。
use: [
'a-loader',
'b-loader',
'c-loader'
]
执行流程
|- a-loader `pitch`
|- b-loader `pitch`
|- c-loader `pitch`
|- 请求的模块作为依赖项
|- c-loader normal execution
|- b-loader normal execution
|- a-loader normal execution
- 传递给pitch方法的数据在执行阶段公开,有利于周期早起捕获和共享信息
- loader传递参数给pitch 方法,流程反转且跳过其他loader(翻译过来,没太懂)
从左到右调用 pitch 方法,先执行 style-loader 里面的 pitch方法,在它里面去指向css-loader,拿到经过处理的css内容,插到 dom 中。
content
实际内容是
var content = require("!!../../node_modules/css-loader/dist/cjs.js!./global.css");
// !! 感叹号用于禁用 loader 配置,如果不禁用会出现无限递归循环调用的情况
update
实际内容
var update = require("!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js")(content, options);
代码以字符串形式返回,在 runtime阶段执行。
网友评论