webpack的loader的原理和实现

想要实现一个loader，需要首先了解loader的基本原理和用法。

1. 使用

loader是处理模块的解析器。

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ // 多个loader，从右向左解析，即css-loader开始
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
}

2.自定义loader的查找规则

很多时候，我们可以自己定义loader, 比如在根目录下新建一个loaders的文件夹，文件夹内实现各个loader的代码。但是webpack不识别这些loader，我们需要配置使webpack识别这些自定义的loader。

有四种方式：

1. resolveLoader.moduels

  resolveLoader: {
    modules: ['node_modules', 'loaders'] // 先从node_modules中查找，没有从loaders文件夹中查找loader1.js
  },
  module: {
    rules: [
      {
        test: /\.js/,
        use: ['loader1']
      }
    ]
  }

2.resolveLoader.alias

  resolveLoader: {
    alias: {// 绝对路径
      loader1: path.resolve(__dirname, 'loaders', 'loader1.js')
    }
  },

3.loader的绝对路径

  module: {
    rules: [
      {
        test: /\.js/,
        use: [path.resolve(__dirname, 'loaders', 'loader1.js')]
      }
    ]
  }

4.npm link(待解决)

3. loader的标准

1.  一个loader只实现一个功能，复合设计的单一功能原则。

2.  loader的处理顺序。

当一个文件需要多个loader时，从最后的loader开始执行，其传入的参数是文件的原始内容。返回结果传入倒数第二个loader, 作为其入参，依次处理，直到第一个loader。

3. loaders 处理的最终结果(最后一个loader返回值)是一个字符串/Buffer。

4. loader类型

loader的加载顺序是按照pre->normal->inline->post的顺序执行

1.pre-前置loader

rule.enforce = pre;

      {
        test: /test\.js$/,
        loader: 'loader3',
        enforce: 'pre'
      },

2.normal-正常loader

没有任何特征的loader都是普通loader

3.inline-行内loader

// 对test.js使用loader1和loader2
import 'loader1!loader2!./test.js'； // 按照从右到左，先执行loader2

行内loader的一个应用场景是，loader中pitch的参数remainingRequest。其通过loaderUtils.stringifyRequest(this, XXXX)后，变为

"../loaders/css-loader.js!./style.css"

对于正常的.css文件，会根据webpack中的规则，从右向左加载。但是对于上面的行内loader,有三个标志符号指定哪些loader。

1）!  忽略普通loader

// 表示忽略webpack配置中的正常loader，然后按照loader类型的顺序加载
require("!" + "../loaders/css-loader.js!./style.css")

2. -!  忽略普通和前置loader

// 表示忽略webpack配置中的正常和前置loader
require("-!" + "../loaders/css-loader.js!./style.css")

3. !! 只使用行内loader 忽略普通，前置，后置loader；

// 表示只使用行内loader, 忽略webpack配置中的loader
require("!!" + "../loaders/css-loader.js!./style.css")

4.post-后置loader

      {
        test: /test\.js$/,
        loader: 'loader5',
        enforce: 'post'
      },

6. loaders的常见API

1. this.callback

当loader有单个返回值时可以直接使用return返回。当需要返回多个结果时，需要使用this.callback。

其预期参数如下：

this.callback(
    err: Error | null,
    content: string | Buffer,
    sourceMap?:SourceMap, // 可选传参
    meta?:any //元数据，可以是任意值；当将AST作为参数传递时，可以提高编译速度
}

⚠️： 使用该方法时，loader必须返回undefined。

2. 越过loader(Pitching loader)

含义：

Pitching loader指的是loader上的pitch方法。

语法：

module.exports = function (content) {
  console.log(this.data); // {value: 42}
  return stringorBuffer;
}
/**
 * 对于请求index.js的rule
 * use: ['loader1','loader2', 'loader3']
 *
 * @param {*} remainingRequest
 * 剩余的请求。
 * 如果返回undefined，则按照remainingRequest的顺序访问下一个loader的pitch
 * 对于第一个被调用的pitch方法来说，其值为: loader2!loader3!index.js
 *
 * @param {*} precedingRequest
 * 前一个请求。
 * 1. 如果返回一个非undefined值，则直接进入precedingRequest所在的loader方法,
 * 并且将pitch的返回值作为该loader方法的参数。
 * 如果该loader不是FinalLoader,按照从右到左顺序依次执行
 * 2. 有一个特殊情况，如果第一个pitch方法返回一个非undefined值，
 * 它必须是string|Buffer,因为它将作为该FinalLoader的返回值
 *
 * @param {*} data
 * pitch中的数据。
 * 初始值是空对象{},可以给其赋值，然后通过loader方法中的this.date共享该数据
 */
 module.exports.pitch = function(remainingRequest, precedingRequest, data) {
  data.value = 42;
  // 此处可以返回数据；但是如果是第一个pitch，只能返回string|Buffer,它就是最终结果
}

作用：

正常的loader加载顺序是从右到左。但是在执行loader之前，会从左到右的调用loader上的pitch方法，可以根据该方法的返回值，决定后续的loader要跳过不执行。其方法中传入的data数据可以通过loader方法中的this.data进行共享。

应用场景：

1 ）最左侧的两个loader之间有关联关系；手动加载loader。

如：style-loader和css-loader

2 ) pitch阶段给data赋值，在执行阶段从this.data取值

3）通过pitch可以跳过某些loader

执行顺序：

use: [
  'a-loader',
  'b-loader',
  'c-loader'
]
// 当所有的loader的pitch方法都返回undefined时，正确的执行顺序如下
|- a-loader `pitch`
  |- b-loader `pitch`
    |- c-loader `pitch`
      |- requested module is picked up as a dependency
    |- c-loader normal execution
  |- b-loader normal execution
|- a-loader normal execution

如果某个loader的pitch方法返回一个非undefined的值，将会跳过剩余的loader。

//  如果上面的b-loader返回一个结果，则执行顺序为
|- a-loader `pitch`
  |- b-loader `pitch` returns a module
|- a-loader normal execution

3. raw

设置loader的raw属性为true,则内容变为二进制形式。针对图片，文件等。

此时content.length就是文件的大小

7. loader工具库中常见方法

loader-utils： 内含各种处理loader的options的各种工具函数

schema-utils:  用于校验loader和plugin的数据结构

我们根据上面的要求，可以自己完成常见loader的实现。

1. loaderUtils.stringifyRequest(this, itemUrl)

将URL转为适合loader的相对路径

/Users/lyralee/Desktop/MyStudy/React/loaders/loaders/css-loader.js!/Users/lyralee/Desktop/MyStudy/React/loaders/src/style.css
// 使用了loaderUtils.stringifyRequest(this, XXXX)方法后
"../loaders/css-loader.js!./style.css"

2. loaderUtils.getOptions(this)

获取loader的options对象

3. schemaUtils(schema, options)

校验options的格式

8.自模拟实现loader

1. babel-loader

简单的模拟实现babel-loader。它本身是基于@babel/core和其他插件和预设。

const babel = require('@babel/core');
const loaderUtils = require('loader-utils');
const path = require('path');

function loader(inputSource) {
  const loaderOptions = loaderUtils.getOptions(this);
  const options = {
    ...options,
    sourceMap: true, //是否生成映射
    filename: path.basename(this.resourcePath) //从路径中获取目标文件名
  }
  const {code, map, ast} = babel.transform(inputSource, loaderOptions);
  // 将内容传递给webpack
  /**
   * code: 处理后的字符串
   * map: 代码的source-map
   * ast: 生成的AST
   */
  this.callback(null, code, map, ast);
}
module.exports = loader;

2. banner-loader

给解析的模块添加注释信息。该loader主要用于学习schema-utils的用法。

const babel = require('@babel/core');
// 获取loader的options
const loaderUtils = require('loader-utils');
// 校验loader的options
const validationOptions = require('schema-utils');
const fs = require('fs');

/**
 *
 * @param {*} inputSource
 * 该方法只接受内容作为入参，要注意使用该插件的顺序，
 * 如果在其他返回多个参数的loader之后接受参数，会丢失内容
 */
function loader(inputSource) {
  // 该loader启用缓存
  this.cacheable();
  // 用于异步操作中
  const callback = this.async();
  const schema = {
    type: 'object',
    properties: {
      text: { type: 'string' },
      filename: { type: 'string'}
    }
  }
  const options = loaderUtils.getOptions(this);
  // 校验options格式是否符合自定义的格式schema
  validationOptions(schema, options);
  const { code } = babel.transform(inputSource);
  // 读取外部文件，作为注释的内容
  fs.readFile(options.filename, 'utf8', (err, text) => {
    callback(null, options.text + text + code);
  })
}
module.exports = loader;

按照loader中的要求，options必须含有两个字段，filename和text,否则会报错

          {
            loader: 'banner-loader',
            options: {
              text: '/***lyra code ***/',
              filename: path.resolve(__dirname, 'banner.txt')
            }
          }

3. less-loader

const less = require('less');

module.exports = function(content) {
  const callback = this.async();
  less.render(content, {filename: this.resource}, (err, result) => {
    callback(null, result.css)
  })
}

4. css-loader

/**
 * 主要实现处理@import 和 url() 语法,基于postcss
 */
 //通过js插件处理样式
const postcss = require('postcss');
// css选择器的词法分析器,用于解析和序列化css选择器
const Tokenizer = require("css-selector-tokenizer");

module.exports = function(content) {
  const callback = this.async();
  const options = {
    importItems: [],
    urlItems: []
  };
  postcss([createPlugin(options)]).process(content).then(result => {
    const {importItems, urlItems} = options;
    let requires = importItems.map(itemUrl => (
      `require(${itemUrl});`
      )
    ).join('');
    // require(url)返回一个打包后的绝对路径
    let cssstring = JSON.stringify(result.css).replace(/_CSS_URL_(\d+)/g, function(match, g1) {
      // "background-image: url('" + require('" + url + "')";
      return '"+ require("' + urlItems[+g1] + '").default + "';
    });

    cssstring = cssstring.replace(/@import\s+['"][^'"]+['"];/g, '');
    callback(null, `${requires}module.exports=${cssstring}`);
  })
}
// 自定义的js插件
function createPlugin({urlItems, importItems}) {
  return function(css) {
    // 遍历@import规则
    css.walkAtRules(/^import$/, function(result) {
      importItems.push(result.params);
    })
    // 遍历每一条样式
    css.walkDecls(function(decl) {
      // 解析样式属性的值
      const values = Tokenizer.parseValues(decl.value);
      values.nodes.forEach(value => {
        value.nodes.forEach(item => {
          if(item.type === 'url') {
            let url = item.url;
            item.url = "_CSS_URL_" + urlItems.length;
            urlItems.push(url);
          }
        })
      })
      // 将解析后值返回序列化
      decl.value = Tokenizer.stringifyValues(values);
    })
  }
}

5.style-loader

const loaderUtils = require('loader-utils');

module.exports.pitch = function(remainingRquest, precedingRequest, data){
  const script = (
    `
      const style = document.createElement('style');
      style.innerHTML = require(${loaderUtils.stringifyRequest(this, '!!' + remainingRquest)});
      document.head.appendChild(style);
    `
  )
  return script;
}

6. file-loader

/**
 * 获取内容了；修改名称；在打包文件夹中输出
 */
const { interpolateName, getOptions } = require('loader-utils');

module.exports = function(content) {
  const { name='[name].[hahs].[ext]' } = getOptions(this) || {};
  const outFilename = interpolateName(this, name, {content});
  this.emitFile(outFilename, content);
  return `module.exports=${JSON.stringify(outFilename)}`
}
// 内容二进制形式
module.exports.raw = true;

7.url-loader

/**
 * 当小于limit时，使用base64;
 * 当大于limit时，根据file-loader处理
 */
const { getOptions } = require('loader-utils');
const fileLoader = require('file-loader');
const mime = require('mime');

module.exports = function(content) {
  const { limit=10*1024 } = getOptions(this) || {};
  if (content.length < limit) {
    const base64 = `data:${mime.getType(this.resourcePath)};base64,${content.toString('base64')}`
    return `module.exports = "${base64}"`
  }
  return fileLoader.call(this, content)
}
module.exports.raw = true;