這篇文章主要介紹webpack源碼之loader機制的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
loader概念
loader是用來加載處理各種形式的資源,本質(zhì)上是一個函數(shù), 接受文件作為參數(shù),返回轉(zhuǎn)化后的結(jié)構(gòu)。
loader 用于對模塊的源代碼進行轉(zhuǎn)換。loader 可以使你在 import 或"加載"模塊時預處理文件。因此，loader 類似于其他構(gòu)建工具中“任務(task)”，并提供了處理前端構(gòu)建步驟的強大方法。loader 可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！
loader和plugin區(qū)別
之前一篇文章中介紹了plugin機制,和今天研究的對象loader,他們兩者在一起極大的拓展了webpack的功能。它們的區(qū)別就是loader是用來對模塊的源代碼進行轉(zhuǎn)換,而插件目的在于解決 loader 無法實現(xiàn)的其他事。為什么這么多說呢?因為plugin可以在任何階段調(diào)用,能夠跨Loader進一步加工Loader的輸出,在構(gòu)建運行期間,觸發(fā)事件,執(zhí)行預先注冊的回調(diào),使用compilation對象做一些更底層的事情。
loader用法
配置
重慶分公司
重慶分公司
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader'
}
]
}
]
}內(nèi)聯(lián)
import Styles from 'style-loader!css-loader?modules!./styles.css';
CLI
webpack --module-bind 'css=style-loader!css-loader'
說明 上面三種使用方法作用都是將一組鏈式的 loader, 按照從右往左的順序執(zhí)行,loader 鏈中的第一個 loader 返回值給下一個 loader。先使用css-loader解析 @import 和 url()路徑中指定的css內(nèi)容,然后用style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標簽中。
loader實現(xiàn)
//將css插入到head標簽內(nèi)部
module.exports = function (source) {
let script = (`
let style = document.createElement("style");
style.innerText = ${JSON.stringify(source)};
document.head.appendChild(style);
`);
return script;
}
//使用方式1
resolveLoader: {
modules: [path.resolve('node_modules'), path.resolve(__dirname, 'src', 'loaders')]
},
{
test: /\.css$/,
use: ['style-loader']
},
//使用方式2
//將自己寫的loaders發(fā)布到npm倉庫,然后添加到依賴,按照方式1中的配置方式使用即可說明 上面是一個簡單的loader實現(xiàn),同步的方式執(zhí)行,相當于實現(xiàn)了style-loader的功能。
loader原理
function iteratePitchingLoaders(options, loaderContext, callback) {
var currentLoaderObject = loaderContext.loaders[loaderContext.loaderIndex];
// load loader module
loadLoader(currentLoaderObject, function(err) {
var fn = currentLoaderObject.pitch;
runSyncOrAsync(
fn,
loaderContext, [loaderContext.remainingRequest, loaderContext.previousRequest, currentLoaderObject.data = {}],
function(err) {
if(err) return callback(err);
var args = Array.prototype.slice.call(arguments, 1);
if(args.length > 0) {
loaderContext.loaderIndex--;
iterateNormalLoaders(options, loaderContext, args, callback);
} else {
iteratePitchingLoaders(options, loaderContext, callback);
}
}
);
});
}說明 上面是webpack源碼中l(wèi)oader執(zhí)行關(guān)鍵步驟,遞歸的方式執(zhí)行l(wèi)oader,執(zhí)行機流程似于express中間件機制
以上是“webpack源碼之loader機制的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
