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

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導出的內容中含有importrequire等語句,webpack會再次進行相關內容的導入,這方面的知識目前暫時不分析)

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

pitch

為什麼需要使用pitch?我們以css-loaderstyle-loader作為分析。

在隻使用css-loader的情況下,假設我們有兩個文件:index.cssindex.jsindex.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-loaderindex.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去加載這個模塊,並將其保存在內存中(多個文件引用同一個模塊,目標模塊隻會被處理一次)。

總結

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

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

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

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

推薦閱讀: