2. 程式人生 > >揭祕webpack loader

揭祕webpack loader

阿新 • • 發佈：2020-01-28

前言

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

設計思路

  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。

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

說明我們編寫的 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;
}

當配置項不符合要求，編譯就會中斷並在控制檯列印錯誤資訊：

開發非同步 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 對等依賴項。

四、總結

  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-load

相關推薦

揭祕webpack loader

前言 Loader(載入器) 是 webpack 的核心之一。它用於將不同型別的檔案轉換為 webpack 可識別的模組。本文將嘗試深入探索 webpack 中的 loader，揭祕它的工作原理，以及如何開發一個 loader。 一、Loader 工作原理 webpack 只能直接處理 javascript

webpack loader

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

webpack----loader

ets 依賴包 ports x文件 true bpa 添加 表達式 文件中 1、Loaders Loaders是webpack中最強大的功能之一了。通過使用不同的loader，webpack通過調用外部的腳本或工具可以對各種各樣的格式的文件進行處理，如分析JSON文件並把它

webpack--loader

頁面 cnpm 遍歷 原來 後處理 bpa pac 事情 style Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換。 所以如果我們需要在應用中添加 css 文件，就需要使用到 css-loader

webpack loader 生成虛擬檔案的方案

此文已由作者張磊授權網易雲社群釋出。 歡迎訪問網易雲社群，瞭解更多網易技術產品運營經驗。 前言 使用 webpack 的時候，難免需要寫一些 loader，接著就會遇到一個很糾結的問題。該 loader 會生成一個檔案，一般這個檔案的生成時機都是在 loader 處理所有的檔案後。一般有兩種處理方案。一種是寫

如何編寫一個webpack loader

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

webpack-loader是怎樣煉成的

囉嗦兩句 學習這件事從學習動機上來看，可以分成兩種情況：主動學習和被動學習。主動學習就是，某天你瀏覽網頁的時候，看到一個酷到沒朋友的效果，趕緊開啟開發者工具，看看用了什麼 css 屬性，用了什麼庫或者框架實現的，這是主動學習。 還有一種是被動學習。就拿我來說，之前用 mpvue 寫小程式的時候，頁面的 jso

如何開發webpack loader

關於webpack 作為近段時間風頭正盛的打包工具，webpack基本佔領了前端圈。相信你都不好意思說不知道webpack。 有興趣的同學可以參考下我很早之前的webpack簡介 . 確實webpack萬事萬物皆模組的思路真是極大的方便了我們的開發，將css，圖片等檔案都能

webpack-loader原理

tco 轉化 nload 屬性 -a property 返回 對象 選項 loader loader 是導出為一個函數的 node 模塊。該函數在 loader 轉換資源的時候調用。給定的函數將調用 loader API，並通過 this 上下文訪問。 loader配置

webpack loader之css、scss、less安裝

nbsp class ebp add bpa web npm ins install 1.打包css，需要安裝css-loader和style-loader yarn add --dev css-loader style-loader 或者 npm instal

webpack loader載入css、圖片

1. 載入 樣式檔案 .css npm install --save-dev style-loader css-loader 2.webpack 加入module 配置 //提供目錄 const path = require('path'); // module.

揭祕webpack plugin

前言 Plugin(外掛) 是 webpack 生態的的一個關鍵部分。它為社群提供了一種強大的方法來擴充套件 webpack 和開發 webpack 的編譯過程。這篇文章將嘗試探索 webpack plugin，揭祕它的工作原理，以及如何開發一個 plugin。 一、Plugin 的作用 關於 Plugin

extract-text-webpack-plugin（you may need an appropriate loader to handle this file type）

查詢 cnblogs out webp span nod module blog 顯示 在使用extract-text-webpack-plugin插件編譯sass文件生成一個單獨的css文件通過link導入到html中，經查詢此方法的優點在於避免直接將css打包入bund

node 報錯:Uncaught Error: Cannot find module "!!../../../node_modules/extract-webpack-plugin/loader.js

方法 nod ima enc mage modules ann not uncaught 問題出在缺少less和less-loader 因為以上模塊使用了less解析。 解決方法在dependencies添加 "less": "^2.7.1", "less-lo

[js高手之路]深入淺出webpack教程系列9-打包圖片(file-loader)用法

圖片 css 文件 alt entry 處理 lan gin style [js高手之路]深入淺出webpack教程系列索引目錄： [js高手之路]深入淺出webpack教程系列1-安裝與基本打包用法和命令參數 [js高手之路]深入淺出webpack教程系列2-配置文件w

webpack常用loader和plugin及打包速度優化

div es2017 .cn 圖片 打包 web class load ima 優化 或 webpack常用loader和plugin及打包速度優化

webpack學習筆記-2-file-loader 和 url-loader

多個 webp 們的 dirname data dir http請求 文件中 class 一 .前言 如果我們希望在頁面引入圖片（包括img的src和background的url）。當我們基於webpack進行開發時，引入圖片會遇到一些問題。 其中一個就

webpack通過postcss-loader添加瀏覽器前綴

auto 方便 all post 屬性 png pan 目錄 .config 　　在webpack中，我們可以很方便的使用autoprefixer來為css3屬性添加不同的瀏覽器前綴。 　　首先，需要安裝autoprefixer不用多說了，其次是安裝postcss-loa

webpack 4+ vue-loader 配置

gui spa plugin 函數 package load kde uid eve webpack 4+ vue-loader 配置 寫的demo，clone下來後，npm dev即可， 可能會由於版本問題，配置會有些許改動，暫時都是可用的 具體配置文件在webpack.

webpack入坑之旅（二）loader入門

pts 文章 加載 dep javascrip mode 這就是 插件 可能 這是一系列文章，此系列所有的練習都存在了我的github倉庫中vue-webpack 在本人有了新的理解與認識之後,會對文章有不定時的更正與更新。下面是目前完成的列表： 引子 在上一篇博客中我們已