前言

Loader(加載器) 是 webpack 的核心之一，它用于將不同型別的檔案轉換為 webpack 可識別的模塊，本文將嘗試深入探索 webpack 中的 loader，揭秘它的作業原理，以及如何開發一個 loader，

一、Loader 作業原理

webpack 只能直接處理 javascript 格式的代碼，任何非 js 檔案都必須被預先處理轉換為 js 代碼，才可以參與打包，loader（加載器）就是這樣一個代碼轉換器，它由 webpack 的 loader runner 執行呼叫，接收原始資源資料作為引數（當多個加載器聯合使用時，上一個loader的結果會傳入下一個loader），最終輸出 javascript 代碼（和可選的 source map）給 webpack 做進一步編譯，

二、 Loader 執行順序

1. 分類

pre：前置loader
normal：普通loader
inline：行內loader
post：后置loader

2. 執行優先級

4類 loader 的執行優級為：pre > normal > inline > post ，
相同優先級的 loader 執行順序為：從右到左，從下到上，

3. 前綴的作用

行內 loader 可以通過添加不同前綴，跳過其他型別 loader，

! 跳過 normal loader，
-! 跳過 pre 和 normal loader，
!! 跳過 pre、 normal 和 post loader，

這些前綴在很多場景下非常有用，

三、如何開發一個loader

loader 是一個匯出一個函式的 node 模塊，

1. 最簡單的 loader

當只有一個 loader 應用于資源檔案時，它接收原始碼作為引數，輸出轉換后的 js 代碼，

// loaders/simple-loader.js

module.exports = function loader (source) {
    console.log('simple-loader is working');
    return source;
}

這就是一個最簡單的 loader 了，這個 loader 啥也沒干，就是接收原始碼，然后原樣回傳，為了證明這個loader被呼叫了，我在里面列印了一句話‘simple-loader is working’，

測驗這個 loader：
需要先配置 loader 路徑
若是使用 npm 安裝的第三方 loader，直接寫 loader 的名字就可以了，但是現在用的是自己開發的本地 loader，需要我們手動配置路徑，告訴 webpack 這些 loader 在哪里，

// webpack.config.js

const path = require('path');
module.exports = {
  entry: {...},
  output: {...},
  module: {
    rules: [
      {
        test: /\.js$/,
        // 直接指明 loader 的絕對路徑
        use: path.resolve(__dirname, 'loaders/simple-loader')
      }
    ]
  }
}

如果覺得這樣配置本地 loader 并不優雅，可以在 webpack配置本地loader的四種方法中挑一個你喜歡的，

執行webpack編譯
可以看到，控制臺輸出 ‘simple-loader is working’，說明 loader 成功被呼叫，

2. 帶 pitch 的 loader

pitch 是 loader 上的一個方法，它的作用是阻斷 loader 鏈，

// loaders/simple-loader-with-pitch.js

module.exports = function (source) {  
    console.log('normal excution');   
    return source;
}

// loader上的pitch方法，非必須
module.exports.pitch =  function() { 
    console.log('pitching graph');
    // todo
}

pitch 方法不是必須的，如果有 pitch，loader 的執行則會分為兩個階段：pitch 階段和 normal execution 階段，webpack 會先從左到右執行 loader 鏈中的每個 loader 上的 pitch 方法（如果有），然后再從右到左執行 loader 鏈中的每個 loader 上的普通 loader 方法，

假如配置了如下 loader 鏈：

use: ['loader1', 'loader2', 'loader3']

真實的 loader 執行程序是：

在這個程序中如果任何 pitch 有回傳值，則 loader 鏈被阻斷，webpack 會跳過后面所有的的 pitch 和 loader，直接進入上一個 loader 的 normal execution，

假設在 loader2 的 pitch 中回傳了一個字串，此時 loader 鏈發生阻斷：

3. 寫一個簡版的 style-loader

style-loader 通常不會獨自使用，而是跟 css-loader 連用，css-loader 的回傳值是一個 js 模塊，大致長這樣：

// 列印 css-loader 的回傳值

// Imports
var ___CSS_LOADER_API_IMPORT___ = require("../node_modules/css-loader/dist/runtime/api.js");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.id, "\nbody {\n    background: yellow;\n}\n", ""]);
// Exports
module.exports = exports;

這個模塊在運行時背景關系中執行后回傳 css 代碼 "\nbody {\n background: yellow;\n}\n"，

style-loader 的作用就是將這段 css 代碼轉成 style 標簽插入到 html 的 head 中，

設計思路

style-loader 最終需回傳一個 js 腳本：在腳本中創建一個 style 標簽，將 css 代碼賦給 style 標簽，再將這個 style 標簽插入 html 的 head 中，
難點是獲取 css 代碼，因為 css-loader 的回傳值只能在運行時的背景關系中執行，而執行 loader 是在編譯階段，換句話說，css-loader 的回傳值在 style-loader 里派不上用場，
曲線救國方案：使用獲取 css 代碼的運算式，在運行時再獲取 css (類似 require('css-loader!index.css')），
在處理 css 的 loader 中又去呼叫 inline loader require css 檔案，會產生回圈執行 loader 的問題，所以我們需要利用 pitch 方法，讓 style-loader 在 pitch 階段回傳腳本，跳過剩下的 loader，同時還需要行內前綴 !! 的加持，

注：pitch 方法有3個引數：

remainingRequest：loader鏈中排在自己后面的 loader 以及資源檔案的絕對路徑以!作為連接符組成的字串，
precedingRequest：loader鏈中排在自己前面的 loader 的絕對路徑以!作為連接符組成的字串，
data：每個 loader 中存放在背景關系中的固定欄位，可用于 pitch 給 loader 傳遞資料，

可以利用 remainingRequest 引數獲取 loader 鏈的剩余部分，

實作

// loaders/simple-style-loader.js

const loaderUtils = require('loader-utils');
module.exports = function(source) {
    // do nothing
}

module.exports.pitch = function(remainingRequest) {
  console.log('simple-style-loader is working');
    // 在 pitch 階段回傳腳本
    return (
      `
      // 創建 style 標簽
      let style = document.createElement('style');
      
      /**
      * 利用 remainingRequest 引數獲取 loader 鏈的剩余部分
      * 利用 ‘!!’ 前綴跳過其他 loader 
      * 利用 loaderUtils 的 stringifyRequest 方法將模塊的絕對路徑轉為相對路徑
      * 將獲取 css 的 require 運算式賦給 style 標簽
      */
      style.innerHTML = require(${loaderUtils.stringifyRequest(this, '!!' + remainingRequest)});
      
      // 將 style 標簽插入 head
      document.head.appendChild(style);
      `
    )
}

一個簡易的 style-loader 就完成了，

試用

webpack 配置

// webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {...},
  output: {...},
  // 手動配置 loader 路徑
  resolveLoader: {
    modules: [path.resolve(__dirname, 'loaders'), 'node_modules']
  },
  module: {
    rules: [
      {
        // 配置處理 css 的 loader
        test: /\.css$/,
        use: ['simple-style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    // 渲染首頁
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

在 index.js 中引入一個 css 樣式檔案

// src/index.js

require('./index.css');
console.log('Brovo!');

樣式檔案中將 body 的背景色設定為黃色

// src/index.css

body {
  background-color: yellow;
}

執行webpack

npm run build

可以看到命令列控制臺列印了 'simple-style-loader is working'，說明 webpack 成功呼叫了我們撰寫的 loader，

在瀏覽器打開 dist 下的 index.html 頁面，可以看到樣式生效，而且成功插入到了頁面頭部！

說明我們撰寫的 loader 發揮作用了，

成功！

三、一些 tips

開發異步 loader

異步 loader 的開發（例如里面有一些需要讀取檔案的操作的時候），需要通過 this.async() 獲取異步回呼，然后手動呼叫它，
用法：

// loaders/simple-async-loader.js

module.exports = function(source) {
    console.log('async loader');
    let cb = this.async();
    setTimeout(() => {
      console.log('ok');
      // 在異步回呼中手動呼叫 cb 回傳處理結果
      cb(null, source);
    }, 3000);
}

注：異步回呼 cb() 的第一個引數是 error，要回傳的結果放在第二個引數，

raw loader

如果是處理圖片、字體等資源的 loader，需要將 loader 上的 raw 屬性設定為 true，讓 loader 支持二進制格式資源（webpack默認是以 utf-8 的格式讀取檔案內容給 loader），
用法：

// loaders/simple-raw-loader.js

module.exports = function(source) {
  // 將輸出 buffer 型別的二進制資料
  console.log(source);
  // todo handle source
  let result = 'results of processing source'
  return `
    module.exports = '${result}'
  `;
}
// 告訴 wepack 這個 loader 需要接收的是二進制格式的資料
module.exports.raw = true;

注：通常 raw 屬性會在有檔案輸出需求的 loader 中使用，

輸出檔案

在開發一些處理資源檔案（比如圖片、字體等）的 loader 中，需要拷貝或者生成新的檔案，可以使用內部的 this.emitFile() 方法.
用法：

// loaders/simple-file-loader.js

const loaderUtils = require('loader-utils');
module.exports = function(source) {
  // 獲取 loader 的配置項
  let options = loaderUtils.getOptions(this) || {};
  // 獲取用戶設定的檔案名或者制作新的檔案名
  // 注意第三個引數，是計算 contenthash 的依據
  let url = loaderUtils.interpolateName(this, options.filename || '[contenthash].[ext]', {content: source});
  // 輸出檔案
  this.emitFile(url, source);
  // 回傳匯出檔案地址的模塊腳本
  return `module.exports = '${JSON.stringify(url)}'`;
}
module.exports.raw = true;

在這個例子中，loader 讀取圖片內容（buffer），將其重命名，然后呼叫 this.emitFile() 輸出到指定目錄，最后回傳一個模塊，這個模塊匯出重命名后的圖片地址，于是當 require 圖片的時候，就相當于 require 了一個模塊，從而得到最終的圖片路徑，（這就是 file-loader 的基本原理）

開發約定

為了讓我們的 loader 具有更高的質量和復用性，記得保持簡單，也就是盡量保持讓一個 loader 專注一件事情，如果發現你寫的 loader 比較龐大，可以試著將其拆成幾個 loader ，

在 webpack 社區，有一份 loader 開發準則，我們可以去參考它來指導我們的 loader 設計：

保持簡單，
利用多個loader鏈，
模塊化輸出，
確保loader是無狀態的，
使用 loader-utils 包，
標記加載程式依賴項，
決議模塊依賴關系，
提取公共代碼，
避免絕對路徑，
使用 peerDependency 對等依賴項，

四、總結

loader 的本質是一個 node 模塊，這個模塊匯出一個函式，這個函式上可能還有一個 pitch 方法，
了解了 loader 的本質和 loader 鏈的執行機制，其實就已經具備了 loader 開發基礎了，
開發 loader 不難上手，但是要開發一款高質量的 loader，仍需不斷實踐，
嘗試自己開發維護一個小 loader 吧～沒準以后可以通過自己撰寫 loader 來解決專案中的一些實際問題，

文章原始碼獲取：https://github.com/yc111/webpack-loader

歡迎交流～

Happy New Year！

參考
https://webpack.js.org/concepts/#loaders
https://webpack.js.org/api/loaders/
https://webpack.js.org/contribute/writing-a-loader/
https://github.com/webpack/webpack/blob/v4.41.5/lib/NormalModuleFactory.js
https://github.com/webpack-contrib/style-loader/blob/master/src/index.js
https://www.npmjs.com/package/loader-utils
https://www.npmjs.com/package/schema-utils

歡迎轉載，轉載請注明出處：
https://champyin.com/2020/01/28/揭秘webpack-loader/

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/152425.html

標籤：JavaScript

上一篇：前端的資料結構

下一篇：深入Nodejs模塊fs - 檔案系統操作

揭秘webpack loader

前言