Webpack學習－Loader

什麼是Loader?

繼上兩篇文章webpack工做原理介紹（上篇、下篇）,咱們瞭解到Loader：模塊轉換器，也就是將模塊的內容按照需求裝換成新內容，並且每一個Loader的職責都是單一，只會完成一種轉換，因此咱們通常對源文件的處理，也是由多個Loader以鏈式順序執行的方式來進行屢次裝換，而後獲得咱們要的結果。

那麼這樣Loader只須要關心輸入和輸出，Loader實際上是一個Node.js模塊，該模塊導出的是一個函數（意味着，全部node.js的api咱們均可以使用），以下：

module.exports = function (source) {
        // 對source作一系列的轉換
        return source;
    }

下面咱們介紹一下webpack提供了哪些供Loader調用的api，對Loader有個比較深入的理解，而後來分析babel-loader的源碼，看看咱們經常使用的loader是怎麼編寫出來的。

得到Loader的options

const loaderUtils = require('loader-utils');
    module.exports = function(source) {
        // 獲取用戶爲當前Loader傳入的options
        console.log(loaderUtils.getOptions(this));
        return source;
    }

返回其餘結果

如上，咱們返回的是轉換後的內容，可是有些狀況下，咱們不只僅須要返回轉換後的內容，還須要返回一些其餘的內容，如sourceMap或是AST語法樹，那麼這時候咱們可使用webpack提供的APIthis.callback，當使用this.callback了，那麼咱們就必須須要在Loader函數返回undefined,以此來讓webpack知道返回的結果在this.callback中，API詳細參數以下：

this.callback(
        // 沒法裝換原內容時的Error
        err: Error || null,
        // 裝換後的的內容，如上述的source
        content: string | Buffer,
        // 用於經過裝換後的內容得出原內容的Source Map，方便調試
        // 咱們瞭解到，SourceMap咱們只是會在開發環境去使用，因而就會變成可控制的，
        // webpack也提供了this.sourceMap去告訴是否須要使用sourceMap，
        // 固然也可使用loader的option來作判斷，如css-loader
        sourceMap?: SourceMap,
        // 若是本次轉換同時生成ast語法樹，也能夠將這個ast返回，方便後續loader須要複用該ast，這樣能夠提升性能
        abstractSyntaxTree? AST
    );

同步與異步

看看異步Loader在this.asyncAPI下如何實現，

module.exports = async function (source) {
        const callback = this.async();
        const { err, content, sourceMap, AST } = await Func();
        callback(err, content, sourceMap, AST); // 如上訴`this.callback`參數同樣
    }

處理二進制數據

像file-loader這樣的Loader，處理的是二進制數據，那麼就須要告訴webpack給loader傳入二進制格式的數據，代碼能夠以下：

module.exports = function(source) {
        if (source instanceof Buffer) {
            // 一系列操做
            return source; //固然我自己也能夠返回二進制數據提供給下一個loader
        }
    }
    moudle.exports.raw = true; //不設置，就會拿到字符串

經過moudle.exports.raw = true;告知webpack，本身自己須要二進制數據。

緩存加速

優化的最佳點，可使用this.cacheable(Boolen)，緩存loader轉換後的內容，當處理文件或依賴文件沒有發生變化時，使用緩存的轉換內容，以此提速！

其餘API

說到學習，固然越系統越好了，api多介紹 ，除了上面經常使用的api以外，還存在如下經常使用的api。

• this.context: 當前處理轉換的文件所在的目錄
• this.resource: 當前處理轉換的文件完整請求路徑，包括querystring
• this.resourcePath: 當前處理轉換的文件的路徑
• this.resourceQuery: 當前處理文件的querystring
• this.target: webpack配置的target
• this.loadMoudle: 處理文件時，須要依賴其餘文件的處理結果時，可使用this.loadMoudle(request: string, callback: function(err, source, sourceMap, module))去獲取到依賴文件的處理結果。
• this.resolve: 獲取指定文件的完整路徑，this.resolve(context: string, request: string, callback: function(err, result: string))
• this.addDependency: 爲當前處理文件添加依賴文件，以便依賴文件發生變化時從新調用Loader轉換該文件,this.addDependency(file: string)
• this.addContextDependency: 爲當前處理文件添加依賴文件目錄，以便依賴文件目錄裏文件發生變化時從新調用Loader轉換該文件，this.addContextDependency(dir: string)
• this.clearDependencies: 清除當前正在處理的文件的全部依賴
• this.emitFile: 輸出一個文件，使用的方法爲this.emitFile(name: string, content: Buffer | string, sourceMap: {...})

babel-loader源碼簡析

源碼第一行以下：

let babel;
    try {
        babel = require("@babel/core");
    } catch (err) {
        if (err.code === "MODULE_NOT_FOUND") {
            err.message +=
            "\n babel-loader@8 requires Babel 7.x (the package '@babel/core'). " +
            "If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.";
        }
        throw err;
    }

babel-loader依賴了@babel/core,這就是安裝babel-loader須要同時安裝@babel/core（一般會再安裝babel-preset-env、babel-plugin-transform-runtime、babel-runtime）的緣由。咱們接下去看，src/index.js整個文件是否是按照咱們前面所講編寫Loader的方法來組織代碼的。

//引入package.json
const pkg = require("../package.json");
/* 
根據babel-loader是否配置cacheDirectory屬性來告訴
babel-loader是否緩存loader的執行結果，若是true，
便會使用cache方法去實現，`cache.js`文件有着read、write、filename（文件命名方法）
以及如何處理緩存的handleCache方法（有則讀，無則寫再讀），有興趣能夠去看看。
*/
const cache = require("./cache");
/*
    transfrom.js用來轉換內容，內部調用了babel.transform方法進行轉換，這裏簡單介紹一下babel的原理：
    babylon將es6/es7代碼解析成ast，babel-traverse對ast進行轉譯，獲得新的ast，新的ast經過
    babel-generator轉換成es5，核心方法在@babel/core/lib/transformation/index.js中的`runSync`
    方法，有興趣能夠去了解一下。
*/
const transform = require("./transform");
const injectCaller = require("./injectCaller");
const path = require("path");
// 獲取Loader參數options
const loaderUtils = require("loader-utils");

module.exports = makeLoader();
module.exports.custom = makeLoader;

function makeLoader(callback) {
  const overrides = callback ? callback(babel) : undefined;

  return function(source, inputSourceMap) {
    // 上面介紹過的api能夠得知，這是個異步Loader,作的是異步裝換的工做
    const callback = this.async();

    loader
      .call(this, source, inputSourceMap, overrides)
      .then(args => callback(null, ...args), err => callback(err));
  };
}

async function loader(source, inputSourceMap, overrides) {
    ....
}

能夠看到確實和咱們Loader編寫方式是同樣的，經過module.exports = makeLoader();導出一個函數，makeLoader()是一個高階函數，又返回了一個函數，經過const callback = this.async();能夠知道，這是一個異步的loader，不難看出最重要的實現都在這一步函數loader裏面了，那麼到底在loader函數裏面究竟作了些什麼呢？咱們來看看，在閱讀源碼前，最好先看看babel-loader的README，先作個基本瞭解.

上面代碼能夠看出loader(source, inputSourceMap, overrides)函數入參有三個，分別是source=>待轉換的code，inputSourceMap=>上一個loader處理後的sourceMap,有的話，overrides=>自定義加載器，整塊源碼能夠分紅幾部分，

• let loaderOptions = loaderUtils.getOptions(this) || {};，獲取options，而且獲取當前處理轉換的文件的路徑this.resourcePath。
• 判斷是否自定義加載器轉換，這裏會進行一系列對options.customize進行判斷，options.customize一個相對路徑，loader函數參數overrides爲空時起效，執行let override = require(loaderOptions.customize);，有了override以後，後續邏輯（如轉換、獲取option）override都會進行介入處理。
• 將函數傳入參數和LoaderOptions歸併，獲得programmaticOptions。
• 調用babel.loadPartialConfig能夠拿到babel配置並賦值給config變量,其實就是爲了容許系統輕鬆操做和驗證用戶的配置，此功能解決了插件和預設
• 生成cacheIdentifier
• 判斷options.cacheDirectory是否須要緩存Loader轉換內容，如爲true，調用cache.js的module.export Cache方法（上面已作介紹）
• config.babelrc不爲空，則有.babelrc文件，依賴.babelrc文件變化，使用this.addDependency(config.babelrc);
• metadataSubscribers 訂閱元數據，主要做用是訂閱一些編譯過程當中的一些元數據，訂閱之後這些元數據將會被添加 到webpack的上下文中。一般咱們是用不上的，估計在某些babel-plugin中可能會使用到。
• 最後將處理後的結果返回

小結

每個Loader其實返回值就是一個Function，並且就是把帶轉換內容傳入，獲得轉換後的內容，作的事情就是這樣，這篇文章先對Loader的基本概念進行介紹，而且瞭解webpack爲Loader的編寫提供一些經常使用的API,最後經過簡析babel-loader的源碼，我以爲應該差很少知道如何去寫一個簡單的Loader了,文章原文地址個人博客。