2. 程式人生 > >如何編寫一個webpack loader

如何編寫一個webpack loader

阿新 • • 發佈：2018-11-07

webpack

loader是什麼

webpack官方定義

A loader is just a JavaScript module that exports a function

  • 從語法角度看，loader就是一個普通的Node.js模組，只是必須以函式格式匯出來供使用。如果有必要可以使用一切Node.js功能模組。

  • 從功能角度看，一個loader是在應用中作用於指定格式的資原始檔並將其按照一定格式轉換輸出。例如：sass-loader將scss檔案轉換為標準css檔案輸出。

 

1

2

3

4

5

6

 
 

// base loader

var fs = require("fs");

module.exports = function(source) {

return source;

};

loader 的種類

  • preloaders 就是在呼叫loader之前需要呼叫的loader, 他不做任何程式碼的轉換，只是進行檢查
  • loaders 就是我們本文章重點講述的用來處理檔案，做程式碼轉換的loader，例如將 scss檔案轉換為css檔案。
  • postloaders 就是在呼叫loader之後需要呼叫的loader，比如進行程式碼覆蓋率測試
    。

loader如何使用

  • loader 是支援鏈式執行的，如處理 sass 檔案的 loader，可以由 sass-loader、css-loader、style-loader 組成，由 compiler 編譯器對其由右向左執行，第一個 loader 將會拿到需處理的原內容，上一個 loader 處理後的結果回傳給下一個接著處理，最後的 Loader 將處理後的結果以 String 或 Buffer 的形式返回給 compiler。

  • 每個 loader 只做該做的事，純粹的事，而不希望一籮筐的功能都整合到一個 loader 中。

  • loader函式還可以選擇使用 JSON 格式來傳遞資料。

loader 呼叫語法

  • 命令列呼叫
 

1

 
 

webpack --module-bind jade --module-bind 'css=style!css'
  • require呼叫

在需要作用的資原始檔名前面加上loader名稱和 ！感嘆號。

 

1

 
 

require('style-loader!css-loader?modules!./styles.css');
  • webpack配置檔案

webpack 2.x語法中需要寫全loader全名，不再允許省略-loader

語法格式一：

webpack 1.x語法

 

1

2

3

4

5

6

7

8

 
 

{

module: {

loaders: [{

test: /\.scss$/,

loader: 'style!css!sass'

}]

}

}；

webpack 2.x語法

 

1

2

3

4

5

6

7

8

 
 

{

module: {

loaders: [{

test: /\.scss$/,

loader: 'style-loader!css-loader!sass-loader'

}]

}

}；

語法格式二：

webpack 1.x

 

1

2

3

4

5

6

7

8

 
 

{

module: {

loaders: [{

test: /\.scss$/,

loader: ['style','css','sass']

}]

}

}；

語法格式三：

webpack 2.x 語法

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

 
 

{

module: {

rules: [{

test: /\.scss$/,

use: [

'style-loader',

'css-loader',

{

loader: "sass-loader",

options: {

/* ... */

}

}

]

}]

}

}；

loader 執行順序

當一個檔案從檔案系統中被讀取進入到loader執行序列中，其執行次序如下：

  1. webpack配置檔案中 preloaders 配置項 （webpack2.x移除）
  2. webpack配置檔案中 loaders 配置項

  3. request請求中指定的loaders，例如：

     

    1

    		 
     

    require('raw!./file.js')

  4. webpack配置檔案中 postloaders 配置項（webpack2.x移除）

在某些情況下，我們需要在js模組請求中覆蓋webpack配置檔案中的loaders順序來實現一些特定需求。具體規則如下：

  • 模組請求引數最前面新增感嘆號 !來禁用配置檔案中的preLoaders
 

1

 
 

require("!raw!./script.coffee")
  • 模組請求引數最前面新增雙感嘆號 !!來禁用配置檔案中所有的loaders
 

1

 
 

require("!!raw!./script.coffee")
  • 模組請求引數最前面新增 -!來禁用配置檔案中preLoaders和loaders，除了postLoaders
 

1

 
 

require("-!raw!./script.coffee")

官方的建議

  • 對於結果為js檔案的情況，建議在loaders中處理
  • 對於預先編譯的非js（如coffee等）轉換js檔案，建議在preloader中處理，如果不是全域性應用也可以在 loaders中處理
  • 對於相同的語言，建議preloader 和 postloader 過程中處理

如何編寫一個loader

loader 輸出處理結果

  • 同步模式（sync mode）

直接返回loader的處理結果。

 

1

2

3

 
 

module.exports = function(content) {

return someSyncOperation(content);

};
  • 非同步模式（async mode）

呼叫 this.async()來獲取this.callback()方法，然後在非同步呼叫的回撥函式中通過callback返回null以及處理結果。

 

1

2

3

4

5

6

7

8

 
 

module.exports = function(content) {

var callback = this.async();

if(!callback) return someSyncOperation(content);

someAsyncOperation(content, function(err, result) {

if(err) return callback(err);

callback(null, result);

});

};

Raw loader

預設情況下，不同loader之間是以UTF-8格式的文字字串來傳遞資料。我們可以通過設定module.exports.raw = true; 來選擇使用Buffer資料格式來傳遞資料，而編譯器會負責相鄰loader之間的格式轉換。

 

1

2

3

4

5

6

7

 
 

module.exports = function(content) {

assert(content instanceof Buffer);

return someSyncOperation(content);

// return value can be a `Buffer` too

// This is also allowed if loader is not "raw"

};

module.exports.raw = true;

Pitching Loader

多個loader的鏈式呼叫預設都是遵循從右到左的順序。但在某些情況下，loaders並不關心前一個loader的處理結果或者資原始檔資料，它僅僅關心元資料metadata即原始輸入內容。

而pitch方法則支援從左到右的執行順序，當pitch方法執行完畢，loaders呼叫流程反轉並跳過剩餘未執行的loaders，繼續呼叫當前loader更左側的loaders。並且通過 data屬性來在當前loader的pitch方法呼叫和 normal方法呼叫之間來傳遞資料。

 

1

2

3

4

5

6

7

8

9

10

 
 

module.exports = function(content) {

return someSyncOperation(content, this.data.value);

};

module.exports.pitch = function(remainingRequest, precedingRequest, data) {

if(someCondition()) {

// fast exit

return "module.exports = require(" + JSON.stringify("-!" + remainingRequest) + ");";

}

data.value = 42;

};

如何做好loader開發

善用loader中的this

loader函式作用域內的 this 變數掛載了一些很有用的方法屬性來實現諸如非同步呼叫、query引數獲取等功能。

  • query則能獲取到 Loader 上附有的引數。 如 require("./somg-loader?ls"); 通過 query 就可以得到 “ls” 了。
  • emitFile 能夠讓開發者更方便的輸出一個 file 檔案，這是 webpack 特有的方法，使用的方法也很直接
 

1

 
 

emitFile(name: string, content: Buffer|String, sourceMap: {...})

啟用結果快取 cacheable

 

1

2

3

4

 
 

module.exports = function(source) {

this.cacheable();

return source;

};

呼叫exec 方法執行一些程式碼片段。

 

1

 
 

exec(code: string, filename: string)

loader-utils

loader開發中經常用到的一個工具模組，其中提供了一些很有用的解析方法。點選檢視文件

code split

require.ensure使得我們可在所有的dependencies項載入完畢後，再執行回撥

require.ensure僅僅是載入元件，並不會執行，若要執行，需要藉助傳進去的require引數

 

1

2

3

4

 
 

require.ensure(["module-a", "module-b"], function(require) {

var a = require("module-a");

// ...

});

參考資料

原文https://fengmiaosen.github.io/2017/01/07/write-webpack-loader/

相關推薦

如何編寫一個webpack loader

loader是什麼 webpack官方定義 A loader is just a JavaScript module that exports a function 從語法角度看，loader就是一個普通的Node.js模組，只是必須以函式格式匯出來供使

如何編寫一個WebPack的外掛原理及實踐

閱讀目錄 一：webpack外掛的基本原理 二：理解 Compiler物件 和 Compilation 物件 三：外掛中常用的API 四：編寫外掛實戰 回到頂部 一：webpack外掛的基本原理 webpack構建工具大家應該不陌生了，那麼下面我們來簡單的瞭解下什麼是webpack的

基於OpenGL編寫一個簡易的2D渲染框架-04 繪制圖片

著色器 drawtext 結構 渲染 images ron renderer make 制圖 閱讀文章前需要了解的知識，紋理：https://learnopengl-cn.github.io/01%20Getting%20started/06%20Textures/ 　

基於OpenGL編寫一個簡易的2D渲染框架-05 渲染文本

new 坐標 false 證明 ont 獲取 simple 了解 param 閱讀文章前需要了解的知識：文本渲染 https://learnopengl-cn.github.io/06%20In%20Practice/02%20Text%20Rendering/ 簡要步

梯有N階，上樓可以一步上一階，也可以一步上二階。編寫一個程序，計算共有多少中不同的走法？

技術 告訴 不同的 mis misc 技術分享 blog main print c語言實現，小夥伴們誰要有更好的實現方法，要告訴我呦 #include int main(void) { int f,i,f1=1,f2=2; printf("請輸入樓梯數"); scanf(

編寫一個線程改變窗體的顏色

pan 使用 tco swing nbsp true 編寫 art 一個 編寫一個線程改變窗體的顏色，1，使用Runnable創建線程，該線程實現窗體的顏色在黑色和白色之間不斷的切換。使用內部類創建線程的方式，實現窗口的顏色在黑色和白色之間不斷的切換。 一、創建類Tes

Angular2-編寫一個簡易的組件

span 裝飾器 cto 理解 log 完整 col 編寫 {} 　　Angular2組件可以這麽理解：編寫一個類，然後在類的上面用組件裝飾器裝飾一下，這個類就成組件了。 　　所以編寫組件分兩步：1）編寫類；2）編寫裝飾器 　　1）編寫類： export class Si

自己動手編寫一個網絡圖片爬蟲

網絡 浪費 原理 get 應用 crawl 方法 網絡圖 理解 如今基本上我們的大部分時間都是浪費在瀏覽網頁上的，網頁有許多的媒體資源，其中最常見的是圖片。當我們瀏覽到比較好的網站的時候，看到比較好看的圖片總是會忍不住要下載。通常來說我們都是右鍵單擊圖標選擇圖片另存為，選擇

【原】shell編寫一個簡單的jmeter自動化壓測腳本

image tac vbo 用戶數 osx dot png das uvc 在公司做壓力測試也挺長時間了，每次測試前環境數據準備都需要話費較長時間，所以一直在考慮能不能將整個過程實現自動化進行，於是就抽空寫了一個自動化腳本，當然這個腳本目前功能十分簡陋，代碼也不完善，很有很

基於OpenGL編寫一個簡易的2D渲染框架-13 使用例子

tom 進行 prim demo custom 第一個 manager sets mar 這是重構渲染器的最後一部分了，將會給出一個 demo，測試模板測試、裁剪測試、半透明排序等等： 上圖是本次 demo 的效果圖，中間的綠色圖形展現的是模板測試。 模板測試

編寫一個函數，求字符串的長度

兩個 eat var urn turn 長度 求字符串的長度 函數 length 方法一：先把漢字用兩個單字節字符代替，返回代替後的字符創長度 function getBytes1(str){　　var str=str.replace(/[^\x00-\xff]/g,‘**

Golang中使用heap編寫一個簡單高效的定時器模塊

true pop 邏輯 .com light 初始化 callback before cell 定時器模塊在服務端開發中非常重要，一個高性能的定時器模塊能夠大幅度提升引擎的運行效率。使用Golang和heap實現一個通用的定時器模塊，代碼來自：https://github.

手把手教你編寫一個簡單的PHP模塊形態的後門

cpp rest xtu job ring 事先 們的 original call 看到Freebuf 小編發表的用這個隱藏於PHP模塊中的rootkit，就能持久接管服務器文章，很感興趣，苦無作者沒留下PoC，自己研究一番，有了此文 0×00. 引言 PHP是一個非常流行

如何編寫一個SQL註入工具

input 簡單 0x03 http images 構造 config dal nio 0x01 前言 　　一直在思考如何編寫一個自動化註入工具，這款工具不用太復雜，但是可以用最簡單、最直接的方式來獲取數據庫信息，根據自定義構造的payload來繞過防護，這樣子就可以。

10.19編寫一個函數 alloc(n) 用來在內存區開辟一個連續的空間(n個字節) 。 和 free(char * p)，將地址p開始的各單元釋放。

null 地址 可用 第一個 ret 定義 define 編寫 bsp #include <stdio.h> #define NULL 0 #define ALLOCSIZE 1000 //最大存儲數量 char allocbuf[ALLOCSIZ

如何用Java編寫一個簡單的服務器和客戶機

exce 解決 對賬 location exceptio acc 明顯 隊列 客戶 今天我要向大家介紹的是自己編寫的一個比較簡單的服務器和客戶機程序，註意一下哦，比較簡單。好了，閑話休提，砸門直入主題。 小編先從客戶機和服務器的模型開始講解。

編寫一個簡單的TCP服務端和客戶端

不同的 大連 終端 服務器端 com 讀寫 所有 字數 資料 下面的實驗環境是linux系統。 效果如下： 1.啟動服務端程序，監聽在6666端口上 2.啟動客戶端，與服務端建立TCP連接 3.建立完TCP連接，在客戶端上向服務端發送消息 4.斷開

編寫一個函數isMerge，判斷一個字符串str是否可以由其他兩個字符串part1和part2“組合”而成

term col ret target tps com turn fun color 編寫一個函數isMerge，判斷一個字符串str是否可以由其他兩個字符串part1和part2“組合”而成。“組合 ”的規則如下： 1).

webpack loader

bsp loader logs itl href cnblogs pac ack 示例 Webpack配置示例和詳細說明 http://www.cnblogs.com/grimm/p/5794440.htmlwebpack loader

編寫一個模版函數count

編寫 影響 -1 pac 當我 clas mes spa 定義 返回值是數組的a[0:n-1]的數組個數。 知識點：數組的兩個特殊性質對我們定義和使用作用在數組上的函數有影響，這兩個性質分別是：不允許拷貝數組以及使用數組時（通常）會將其轉換成指針。因為不能拷貝數組，所以我們