揭秘webpack loader

来源:https://www.cnblogs.com/champyin/archive/2020/01/28/12238528.html
-Advertisement-
Play Games

Loader(載入器) 是 webpack 的核心之一。它用於將不同類型的文件轉換為 webpack 可識別的模塊。本文將深入探索 webpack 中的 loader，揭秘它的工作原理，以及如何開發一個 loader。 ...


前言

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 成功被調用。

webpack-loader1.jpg

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 執行過程是：

webpack-loader-flow-with-pitch.png

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

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

webpack-loader-flow-with-pitch2.png

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 中。

設計思路

  1. style-loader 最終需返回一個 js 腳本：在腳本中創建一個 style 標簽，將 css 代碼賦給 style 標簽，再將這個 style 標簽插入 html 的 head 中。
  2. 難點是獲取 css 代碼，因為 css-loader 的返回值只能在運行時的上下文中執行，而執行 loader 是在編譯階段。換句話說，css-loader 的返回值在 style-loader 里派不上用場。
  3. 曲線救國方案：使用獲取 css 代碼的表達式，在運行時再獲取 css (類似 require('css-loader!index.css')）。
  4. 在處理 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。

webpack-loader3.jpg

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

webpack-loader2.jpg

說明我們編寫的 loader 發揮作用了。

成功！

三、一些 tips

推薦2個工具包

開發 loader 必備：

1. loader-utils
這個模塊中常用的幾個方法：

  • getOptions 獲取 loader 的配置項。
  • interpolateName 處理生成文件的名字。
  • stringifyRequest 把絕對路徑處理成相對根目錄的相對路徑。

2. schema-utils
這個模塊可以幫你驗證 loader option 配置的合法性。
用法：

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

const loaderUtils = require('loader-utils');
const validate = require('schema-utils');
module.exports = function(source) {
  // 獲取 loader 配置項
  let options = loaderUtils.getOptions(this) || {};
  // 定義配置項結構和類型
  let schema = {
    type: 'object',
    properties: {
      name: {
        type: 'string'
      }
    }
  }
  // 驗證配置項是否符合要求
  validate(schema, options);
  return source;
}

當配置項不符合要求，編譯就會中斷併在控制台列印錯誤信息：

webpack-loader4.jpg

開發非同步 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;

webpack-loader5.jpg

註：通常 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;

webpack-loader6.jpg

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

開發約定

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

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

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

四、總結

  1. loader 的本質是一個 node 模塊，這個模塊導出一個函數，這個函數上可能還有一個 pitch 方法。

  2. 瞭解了 loader 的本質和 loader 鏈的執行機制，其實就已經具備了 loader 開發基礎了。

  3. 開發 loader 不難上手，但是要開發一款高質量的 loader，仍需不斷實踐。

  4. 嘗試自己開發維護一個小 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/%E6%8F%AD%E7%A7%98webpack-loader/


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【WPF學習】第十五章 WPF事件
    前兩章學習了WPF事件的工作原理，現在分析一下在代碼中可以處理的各類事件。儘管每個元素都提供了許多事件，但最重要的事件通常包括以下5類： 生命周期事件：在元素被初始化、載入或卸載時發生這些事件。 滑鼠事件：這些事件是滑鼠動作的結果。 鍵盤事件：這些事件是鍵盤動作（如按下鍵盤上的鍵）的結果。 手寫筆事 ...
  • C#面向對象--類
    一、類（Class）是CTS中五種基本類型之一，是一種引用類型，封裝了同屬一個邏輯單元的數據（Data）和行為（Behavior），這些數據和行為通過類中的成員表示；使用class關鍵字定義類： //定義一個公共類MyClass public class MyClass { public int M ...
  • C# WPF 一個設計界面
    微信公眾號： "Dotnet9" ，網站： "Dotnet9" ，問題或建議： "請網站留言" ， 如果對您有所幫助： "歡迎贊賞" 。 C WPF 一個設計界面 今天正月初三，大家在家呆著挺好，不要忘了自我充電。 武漢人民加油，今早又有噩耗，24號（8號）一路走好。 閱讀導航 1. 本文背景 2. ...
  • Linux起源
    Linux起源 操作系統出現時間線： Unix1970年誕生 ，71年用C語言重寫 Apple II 誕生於1976年 window誕生於1985年 Linux誕生於1991年，由大學生Linus Torvalds和後來的眾多愛好者共同開發完成。 想必大家看了這個時間線應該能想明白為啥Linux要出 ...
  • centos 7.6 docker 安裝 nextcloud -使用sqlite資料庫
    docker search nextcloud docker pull docker.io/nextcloud docker images mkdir /home/nextcloud chmod -R 777 nextcloud/ docker run -d --restart=always --n ...
  • Spark基礎和RDD
    spark 1. Spark的四大特性 1. 速度快 spark比mapreduce快的兩個原因 1. 基於記憶體 2. 進程與線程 2. 易用性 1. 可以用java、scala、python、R等不同的語言來快速編寫spark程式 3. 通用性 4. 相容性 1. spark程式有多種運行模式 s ...
  • Linux安裝Redis、後臺運行、系統自啟動
    Redis是用C語言編寫的開源免費的高性能的分散式記憶體資料庫，基於記憶體運行並支持持久化的NoSQL資料庫。 安裝 1）從官網http://download.redis.io/releases/下載redis壓縮包，如redis-5.0.3.tar.gz 2）上傳Linux伺服器目錄opt，解壓文件包 ...
  • html點擊圓形擴散顯示界面特效
    html點擊圓形擴散顯示界面特效 "開場白" "效果" "用到的核心代碼" "思考" "探索" "源碼" "相容性問題" 開場白 經常看到某些app有點擊擴散的特效，有些當做擴散顯示界面，有些擴散改變主題顏色，想在網頁上實現一下，所以就有了這個。 效果 不想聽逼逼的直接去 "源碼" 用到的核心代碼 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類