美文网首页
style-loader内部主要机制

style-loader内部主要机制

作者: jluemmmm | 来源:发表于2020-12-30 14:12 被阅读0次

通过对主要代码扫读,结合分析文章,梳理如下:

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阶段执行。

webpack loader 从上手到理解系列:style-loader

相关文章

网友评论

      本文标题:style-loader内部主要机制

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