阅读 231

编写一个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行