目录

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。另外需要使用一个打水印的库，。具体使用方法，参加官方文档。另外因为我们需要处理路径，需要获取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行 。