loader

loader是一個函數(shù)，loader模塊要默認(rèn)導(dǎo)出該函數(shù)，同時這個函數(shù)上可以有pitch方法，webpack會執(zhí)行這個pitch方法，pitch方法會影響webpack后續(xù)行為。

loader的作用是將源文件轉(zhuǎn)化為可以執(zhí)行的js模塊，webpack會檢查loader返回的這個模塊是否是正確的，符合js模塊化規(guī)范，如果有錯誤會終止打包。例如我定義了一個test.js模塊，其默認(rèn)導(dǎo)出一個函數(shù)：

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返回了一段新的代碼，默認(rèn)導(dǎo)出一個對象，在index.js中我們導(dǎo)入test.js模塊，嘗試輸出對象上的name屬性，然后通過webpack打包：

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

打包結(jié)果為main.js，運(yùn)行main.js可以正確得到輸出。這說明webpack執(zhí)行了var a = {name: 'wjl'}; module.exports = a;，test.js模塊最終導(dǎo)出的內(nèi)容為a。

當(dāng)把test-loader的導(dǎo)出語句刪除，改為以下內(nèi)容時，能夠正確通過webpack檢查，但是index.js中不能訪問導(dǎo)出對象了：

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)

運(yùn)行導(dǎo)出文件main.js得到

這是由于這個模塊沒有導(dǎo)出內(nèi)容（對象上沒有屬性），test.js的模塊代碼會在運(yùn)行時執(zhí)行（輸出123，cjs的模塊需要執(zhí)行完模塊內(nèi)容才能得到導(dǎo)出對象）。

（如果loader導(dǎo)出的內(nèi)容中含有import或require等語句，webpack會再次進(jìn)行相關(guān)內(nèi)容的導(dǎo)入，這方面的知識目前暫時不分析）

loader總結(jié)：loader的作用是將準(zhǔn)備導(dǎo)入的模塊里面的內(nèi)容轉(zhuǎn)換成可以正常執(zhí)行的js模塊代碼，轉(zhuǎn)換后的內(nèi)容會在運(yùn)行時執(zhí)行，以得到模塊的導(dǎo)出內(nèi)容或執(zhí)行其他副作用代碼。

pitch

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

在只使用css-loader的情況下，假設(shè)我們有兩個文件：index.css和index.js，index.css定義了一些樣式，index.js導(dǎo)入了index.css：

index.css：

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

index.js：

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

運(yùn)行結(jié)果為：

css-loader將目標(biāo)樣式文件轉(zhuǎn)換成一個js對象并導(dǎo)出了該對象，默認(rèn)屬性上有index.css文件的信息。

需要注意的是，這個對象是執(zhí)行完css-loader轉(zhuǎn)換的模塊內(nèi)容后得到的！我們先定義一個普通的my-style-loader根據(jù)調(diào)用順序拿到css-loader的返回值:

my-style-loader:

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

css-loader將index.css模塊轉(zhuǎn)換為以下內(nèi)容：

// Imports
import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from "./node_modules/.pnpm/registry.npmmirror.com+css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/runtime/noSourceMaps.js";
import ___CSS_LOADER_API_IMPORT___ from "./node_modules/.pnpm/registry.npmmirror.com+css-loader@6.7.3_webpack@5.75.0/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里面的內(nèi)容，還是要執(zhí)行完index.css模塊才能得到

使用style-loader的目的是往document中插入style標(biāo)簽，如果style-loader是一個普通loader的話，它需要執(zhí)行css-loader返回的模塊才能得到css樣式，當(dāng)然可以解析css-loader返回的模塊內(nèi)容，然后得到樣式，然后返回創(chuàng)建style標(biāo)簽的相關(guān)語句，但是這樣工作量太大了。而返回的模塊中有import相關(guān)的語句時，webpack還會加載那些import的內(nèi)容，但是例如./node_modules/.pnpm/registry.npmmirror.com+css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/runtime/api.js是會被webpack最終打包生成的模塊，在nodejs環(huán)境中是無法得到的。

打包產(chǎn)物：

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

style-loader的思路就是，得到css-loader的模塊內(nèi)容，然后再將模塊內(nèi)容插入到style標(biāo)簽中，再將style標(biāo)簽插入文檔中。

為了得到css-loader處理后的內(nèi)容（需要能被執(zhí)行），style-loader構(gòu)造了一個新的require語句，即：

require(`${loaderUtils.stringifyRequest(this, '!!' + remainingRequest)}`)
// !!./node_modules/.pnpm/registry.npmmirror.com+css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/cjs.js!./index.css

webpack發(fā)現(xiàn)返回的內(nèi)容中有模塊導(dǎo)入，然后使用路徑中的loader去加載這個模塊，并將其保存在內(nèi)存中（多個文件引用同一個模塊，目標(biāo)模塊只會被處理一次）。

總結(jié)

loader和picher本質(zhì)上都是改變目標(biāo)文件的內(nèi)容，讓它變成符合js語法的代碼，如果返回的內(nèi)容有不存在的導(dǎo)入，則會再次執(zhí)行導(dǎo)入。

webpack每個loader處理的結(jié)果都會生成單獨(dú)的模塊，但是在loader函數(shù)中，它無法之前使用了哪些loader，也無法知道已生成模塊的名字，因此style-loader無法在loader函數(shù)中導(dǎo)入已經(jīng)生成的模塊。

而pitch階段可以獲取到之后的loader順序，實(shí)現(xiàn)起來也更加方便。

以上就是style-loader為什么要使用pitch方法原理解析的詳細(xì)內(nèi)容，更多關(guān)于style-loader使用pitch方法的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論