loader：链式调用模型和pitch

loader的链式调用模型

想要正确的处理一类资源往往不只需要一种loader，比如less：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
}

可以看到配置了这三种loader：”style-loader”, “css-loader”, “less-loader”。
过去我们知道，这些loader作用的顺序是按照配置，从右到左调用，先调用的输出结果作为后调用的输入，所以上面的代码可以解释为：

1. 首先调用 less-loader 将 less 代码转译为 css 代码；
2. 将 less-loader 结果传入 css-loader，进一步将 css 内容包装成类似 module.exports = “${css}” 的 js 代码片段；
3. 将 css-loader 结果传入 style-loader，在运行时调用 injectStyle 等函数，将内容注入到页面的