style-loader内部主要机制

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

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