编写一个webpack的loader（2）

目录

1. 介绍一下raw-loader
2. 编写一个raw-loader的demo，watermark-loader
3. 个人对编写loader的看法

raw-loader

默认情况下，资源文件会被转化为 UTF-8 字符串，然后传给 loader。但是有些情况下，我们需要操作二进制数据。这种时候，只需要设置一个raw属性，传给loader的就是二进制数据。

举例说明

module.exports = function(content) {
    // doanything
};
// 这个设置是关键
module.exports.raw = true;

其实raw-loader只是通过功能来区分的。同样在内部可以实现同步loader和异步loader。

watermark-loader

这是一个demo，功能上就是给所有的图片文件打上一个图片水印。

下面便开始编写这个loader

首先，我们把这个loader的基础代码写好，则有：

module.exports = function(content) {
    
};

module.exports.raw = true;

因为我们只是给图片打水印，也就不存在异步操作了。所以这是一个同步loader。另外需要使用一个打水印的库，node-images。具体使用方法，参加官方文档。另外因为我们需要处理路径，需要获取loader配置，也就需要用到两个库，一个是path, 另一个是loader-utils。

然后watermark-loader已经基本成型，便有了如下代码以及伪代码。

const path = require("path");
const images = require("images");
const loaderUtils = require('loader-utils');

module.exports = function(content) {
    // 获取本loader对应的配置参数
    // 获取水印文件路径

    // 获取需要处理的图片路径

    // 给图片打上水印

    // 发射文件

    // 返回数据
  
};

module.exports.raw = true;

接下来编码即可。这里需要提到的一点事，node-images这个库的文档上没有给出返回二进制的方法。通过分析源码后，我发现其实是有这样的方法的。使用encode即可。

const path = require("path");
const images = require("images");
const loaderUtils = require('loader-utils');

module.exports = function(content) {
    // 获取本loader对应的配置参数
    // 获取水印文件路径
    const { watermarkPath = '' } = this.query;
    // 获取需要处理的图片路径
    const url = loaderUtils.interpolateName(this, "[path][name].[ext]", {
        content: source,
        context: this.context
    });
    // 给图片打上水印
    const file = images(path.resolve(this.context, url))
          .draw(images(path.resolve(this.rootContext, watermarkPath)), 10, 10)
          .encode(path.extname(url) || 'png');
    // 发射文件
    this.emitFile(url, file);
    // 返回数据
    const publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`;

    return `module.exports = ${publicPath};`;
};

module.exports.raw = true;

这样就完成了一个watermark-loader。能给图片打水印了。

具体代码将会分享到github上面。

个人对loader的看法

其实编写loader是蛮简单的。例如几乎每个项目都会用到的file-loader这个库的核心代码也不到 60行 。