webpack原理解析（二）实现一个简单的Loader

Loader是什么

webpack中 loader 是一个非常重要的概念，loader 可以简单的理解成一个文件处理器，webpack使用 loader 来处理各类文件，比如 .scss转成成 css文件, 小图片转换成base64图片。

本质上讲，loader 只是导出为函数的 JavaScript 模块，webpack打包的时候，会调用这个函数，把上一个loader产生的结果或资源文件(resource file)传入进去。

这次我打算开发一个把普通图片转换成 .webp 格式的 Loader，以达到减小图片大小的目的。

Loader 工具库

开发 loader 之前，先要了解两个 loader开发的工具包——loader-utils 和 schema-utils

• loader-utils 用于获取 loader 的 options。
• schema-utils 用于校验 loader 的 options 与 JSON Schema 结构定义的是否一致。

import { getOptions } from 'loader-utils';
import { validateOptions } from 'schema-utils';
const schema = {
  // ...
}
export default function(source) {
  // 获取 options
  const options = getOptions(this);
  // 检验loader的options是否合法
  validateOptions(schema, options, 'Demo Loader');

  // 在这里写转换 loader 的逻辑
  // ...
};
复制代码

Loader 开发准则

• 单一职责：一个 loader 只处理一件事情，保证简单和可维护，复杂场景可以用多个 loader 组合完成。
• 模块化：保证 loader 是模块化的。loader 生成模块需要遵循和普通模块一样的设计原则。
• 无状态：在多次模块的转化之间，我们不应该在 loader 中保留状态。每个 loader 运行时应该确保与其他编译好的模块保持独立，同样也应该与前几个 loader 对相同模块的编译结果保持独立。

总之一句话，我们在写一个 loader 的时候，保持其职责单一，只需要关心输入和输出就好。

同步 loader 和 异步 loader

loader之所以有同步和异步之分，是因为有些资源的处理比较耗时，需要异步处理，等待处理完成后再继续执行。loader 用 this.callback() 返回处理结果，如下：

this.callback(
  err: Error | null,
  content: string | Buffer,
  sourceMap?: SourceMap,
  meta?: any
);
复制代码

1. 第一个参数必须是 Error 或者 null
2. 第二个参数是一个 string 或者 Buffer。
3. 可选的：第三个参数必须是一个可以被这个模块解析的 source map。
4. 可选的：第四个选项，会被 webpack 忽略，可以是任何东西（例如一些元数据）。

// 同步loader 返回多个处理结果
module.exports = function(content, map, meta) {
  this.callback(null, someSyncOperation(content), map, meta);
};
复制代码

同步模式下，如果返回结果只有一个，也可以直接使用 return 返回结果。

// 同步loader 只返回一个处理结果
module.exports = function(content, map, meta) {
  return someSyncOperation(content);
};
复制代码

异步模式下使用 this.async 来获取 callback 函数

module.exports = function(content, map, meta) {
  var callback = this.async();
  someAsyncOperation(content, function(err, result, sourceMaps, meta) {
    if (err) return callback(err);
    callback(null, result, sourceMaps, meta);
  });
};
复制代码

开发自己的 Loader

项目目录结构

|–src
| |–cjs.js //commonJs 入口
| |–index.js // loader 主文件
| |–options.json // loader options 定义文件
|–babel.config.js
|–package.json
|–readme.md

定义 options

options 里只有一个属性 quality, 用来控制生成 .webp 文件的质量,定义如下：

{
  "additionalProperties": true,
  "properties": {
    "quality": {
      "description": "quality factor (0:small..100:big), default=75",
      "type": "number"
    }
  },
  "type": "object"
}
复制代码

图片格式转换

cwebp 这个js模块提供了普通图片和.webp 之间相互转换的功能。

const CWebp = require('cwebp').CWebp

/**
 * 普通图片转 .webp图片
 * @param {string | buffer} img 图片绝对路径或二进制流
 * @param {number} quality 生成 webp 图片的质量，默认75
 * @returns .webp 文件流
 */
async function convertToWebp (img, quality = 75) {
  let encoder = new CWebp(img)
  encoder.quality = quality
  let buffer = await encoder.toBuffer()
  return buffer
}
复制代码

编写 loader

import schema from './options.json'

export default async function loader (content) {
  // 异步模式
  let callback = this.async()
  // 获取 options
  const options = loaderUtils.getOptions(this) || {}
  // 验证 options
  validateOptions(schema, options, {
    name: 'webp Loader',
    baseDataPath: 'options'
  })
  try {
    // 普通图片转 .webp
    let buffer = await convertToWebp(content, options.quality)
    callback(null, buffer)
  } catch (err) {
    callback(err)
  }
}
// loader 接收文件流
export const raw = true
复制代码

到这里这个 Loader 就基本完成了。

使用

// webpack.config.js
module.exports = {
  // 其他配置
  // ...
  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: [{
        loader: 'file-loader',
        options: {
          name: '[name].[ext].webp'
        }
      },{
        loader: 'webp-loader',
        options: {
          quality: 70 
        }
      }]
    }]
  }
}
复制代码

总结

其实写一个 Loader 并没有想象中的那么复杂，只要掌握了基本要点，你也可以拥有自己的 Loader。

关注我们

作者：快狗打车前端团队
链接：https://juejin.im/post/5e1fc8f9e51d4501fa46801b