編寫一個webpack的loader（2）

目錄

1. 介紹一下raw-loader
2. 編寫一個raw-loader的demo，watermark-loader
3. 我的對編寫loader的見解

raw-loader

默認狀況下，資源文件會被轉化爲 UTF-8 字符串，而後傳給 loader。可是有些狀況下，咱們須要操做二進制數據。這種時候，只須要設置一個raw屬性，傳給loader的就是二進制數據。javascript

舉例說明java

module.exports = function(content) {
    // doanything
};
// 這個設置是關鍵
module.exports.raw = true;
複製代碼

其實raw-loader只是經過功能來區分的。一樣在內部能夠實現同步loader和異步loader。node

watermark-loader

這是一個demo，功能上就是給全部的圖片文件打上一個圖片水印。webpack

下面便開始編寫這個loadergit

首先，咱們把這個loader的基礎代碼寫好，則有：github

module.exports = function(content) {
    
};

module.exports.raw = true;
複製代碼

由於咱們只是給圖片打水印，也就不存在異步操做了。因此這是一個同步loader。另外須要使用一個打水印的庫，node-images。具體使用方法，參加官方文檔。另外由於咱們須要處理路徑，須要獲取loader配置，也就須要用到兩個庫，一個是path, 另外一個是loader-utils。web

而後watermark-loader已經基本成型，便有了以下代碼以及僞代碼。npm

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。能給圖片打水印了。ui

具體代碼將會分享到github上面。

我的對loader的見解

其實編寫loader是蠻簡單的。例如幾乎每一個項目都會用到的file-loader這個庫的核心代碼也不到 60行 。