style-loader為什麼要使用pitch方法原理解析

Posted on by

loader

loader是一個函數，loader模塊要默認導出該函數，同時這個函數上可以有pitch方法，webpack會執行這個pitch方法，pitch方法會影響webpack後續行為。

loader的作用是將源文件轉化為可以執行的js模塊，webpack會檢查loader返回的這個模塊是否是正確的，符合js模塊化規范，如果有錯誤會終止打包。例如我定義瞭一個test.js模塊，其默認導出一個函數：

test.js

module.exports = function (a, b) {
    return a+b;
}

然後定義一個test-loader，讓其隻會匹配test.js：

module.exports = function (content) {
    return `var a = {name: 'wjl'}; module.exports = a;`
}

test-loader返回瞭一段新的代碼，默認導出一個對象，在index.js中我們導入test.js模塊，嘗試輸出對象上的name屬性，然後通過webpack打包：

const a = require('./test.js')
console.log(a.name)

打包結果為main.js，運行main.js可以正確得到輸出。這說明webpack執行瞭var a = {name: 'wjl'}; module.exports = a;，test.js模塊最終導出的內容為a。

當把test-loader的導出語句刪除，改為以下內容時，能夠正確通過webpack檢查，但是index.js中不能訪問導出對象瞭：

test-loader.js

module.exports = function (content) {
    // return `var a = {name: 'wjl'}; console.log(123); module.exports = a;`
    return `var a = {name: 'wjl'}; console.log(123);`
}

index.js

const a = require('./test.js')
console.log(a, a.name)

運行導出文件main.js得到

這是由於這個模塊沒有導出內容（對象上沒有屬性），test.js的模塊代碼會在運行時執行（輸出123，cjs的模塊需要執行完模塊內容才能得到導出對象）。

（如果loader導出的內容中含有import或require等語句，webpack會再次進行相關內容的導入，這方面的知識目前暫時不分析）

loader總結：loader的作用是將準備導入的模塊裡面的內容轉換成可以正常執行的js模塊代碼，轉換後的內容會在運行時執行，以得到模塊的導出內容或執行其他副作用代碼。

pitch

為什麼需要使用pitch？我們以css-loader和style-loader作為分析。

在隻使用css-loader的情況下，假設我們有兩個文件：index.css和index.js，index.css定義瞭一些樣式，index.js導入瞭index.css：

index.css：

body  {
    font-size: 16px;
    color: red;
}

index.js：

const style = require('./index.css')
console.log(style);

運行結果為：

css-loader將目標樣式文件轉換成一個js對象並導出瞭該對象，默認屬性上有index.css文件的信息。

需要註意的是，這個對象是執行完css-loader轉換的模塊內容後得到的！我們先定義一個普通的my-style-loader根據調用順序拿到css-loader的返回值:

my-style-loader:

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

css-loader將index.css模塊轉換為以下內容：

// Imports
import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from "./node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/runtime/noSourceMaps.js";
import ___CSS_LOADER_API_IMPORT___ from "./node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/runtime/api.js";
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, "body  {\r\n    font-size: 16px;\r\n    color: red;\r\n}", ""]);
// Exports
export default ___CSS_LOADER_EXPORT___;
​

也就是說，index.css裡面的內容，還是要執行完index.css模塊才能得到

使用style-loader的目的是往document中插入style標簽，如果style-loader是一個普通loader的話，它需要執行css-loader返回的模塊才能得到css樣式，當然可以解析css-loader返回的模塊內容，然後得到樣式，然後返回創建style標簽的相關語句，但是這樣工作量太大瞭。而返回的模塊中有import相關的語句時，webpack還會加載那些import的內容，但是例如./node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/runtime/api.js是會被webpack最終打包生成的模塊，在nodejs環境中是無法得到的。

打包產物：

一個模塊加載（import '!!xxxx-loader!./index.css'）被webpack打包之後會添加到module map裡面，鍵就是請求路徑。

style-loader的思路就是，得到css-loader的模塊內容，然後再將模塊內容插入到style標簽中，再將style標簽插入文檔中。

為瞭得到css-loader處理後的內容（需要能被執行），style-loader構造瞭一個新的require語句，即：

require(`${loaderUtils.stringifyRequest(this, '!!' + remainingRequest)}`)
// !!./node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js!./index.css

webpack發現返回的內容中有模塊導入，然後使用路徑中的loader去加載這個模塊，並將其保存在內存中（多個文件引用同一個模塊，目標模塊隻會被處理一次）。

總結

loader和picher本質上都是改變目標文件的內容，讓它變成符合js語法的代碼，如果返回的內容有不存在的導入，則會再次執行導入。

webpack每個loader處理的結果都會生成單獨的模塊，但是在loader函數中，它無法之前使用瞭哪些loader，也無法知道已生成模塊的名字，因此style-loader無法在loader函數中導入已經生成的模塊。

而pitch階段可以獲取到之後的loader順序，實現起來也更加方便。

以上就是style-loader為什麼要使用pitch方法原理解析的詳細內容，更多關於style-loader使用pitch方法的資料請關註WalkonNet其它相關文章！

推薦閱讀：