如何解析webpack4.0中Loader概念-創(chuàng)新互聯(lián)

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何解析webpack4.0中Loader概念，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)公司于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元利川做網(wǎng)站,已為上家服務(wù),為利川各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575

webpack作為前端最火的構(gòu)建工具，是前端自動化工具鏈最重要的部分，使用門檻較高。本系列是筆者自己的學(xué)習(xí)記錄，比較基礎(chǔ)，希望通過問題 + 解決方式的模式，以前端構(gòu)建中遇到的具體需求為出發(fā)點(diǎn)，學(xué)習(xí)webpack工具中相應(yīng)的處理辦法。（本篇中的參數(shù)配置及使用方式均基于webpack4.0版本）

一. loader綜述

loader是webpack的核心概念之一，它的基本工作流是將一個文件以字符串的形式讀入，對其進(jìn)行語法分析及轉(zhuǎn)換（或者直接在loader中引入現(xiàn)成的編譯工具，例如sass-loader中就引入了node-sass將SCSS代碼轉(zhuǎn)換為CSS代碼，再交由css-loader處理），然后交由下一環(huán)節(jié)進(jìn)行處理，所有載入的模塊最終都會經(jīng)過moduleFactory處理，轉(zhuǎn)成javascript可以識別和運(yùn)行的代碼，從而完成模塊的集成。

loader支持鏈?zhǔn)秸{(diào)用，所以開發(fā)上需要嚴(yán)格遵循“單一職責(zé)”原則，即每個loader只負(fù)責(zé)自己需要負(fù)責(zé)的事情：將輸入信息進(jìn)行處理，并輸出為下一個loader可識別的格式。

實(shí)際開發(fā)中，很少會出現(xiàn)需要自己寫loader來實(shí)現(xiàn)復(fù)雜需求的場景，如果某個擴(kuò)展名的文件無法快速集成到自動化構(gòu)建工具里，估計(jì)很快就會被拋棄了，大家都那么忙是吧。但是了解loader的基本原理和編譯器的基本原理卻是非常有必要的。

二. 如何寫一個loader

如果需要編寫一個功能完整的loader，建議先到webpack的官方網(wǎng)站瀏覽一下loader有哪些API，地址：webpack官網(wǎng)-loader API，其中對于編寫同步loader，異步loader，如何跳過loader，如何獲取options配置項(xiàng)等等都做了非常詳細(xì)的解釋，本篇中不再贅述。

假設(shè)現(xiàn)在要實(shí)現(xiàn)一個dash-loader,它的功能是加載并處理名稱為*.tpl.html的文件，將其變?yōu)橐粋€CommonJs模塊。也就是說要完成一個如下的基本轉(zhuǎn)換：

轉(zhuǎn)換前的文本：

<div>
    <h4>這里是標(biāo)題</h4>
    <p>這里是內(nèi)容</p>    
</div>

轉(zhuǎn)換后的文本：

var str = '<div><h4>這里是標(biāo)題</h4><p>這里是內(nèi)容</p></div>';
module.exports = str;

那么webpack.config.js中需要增加如下的配置:

...
module:{
    rules:[{
        test: /\.tpl\.html$/,
        use:[{
            loader:'dash-loader'
        }]
    }]
}

在項(xiàng)目的node_modules依賴文件夾中新建dash-loader文件夾，并在其中新建一個index.js文件，內(nèi)容的基本格式為：

//index.js
module.exports = function(source){
    var tpl="";
    source.split(/\r?\n/).forEach(function(line){
        line=line.trim();
        if(!line.length){
            return;
        }
        //對line進(jìn)行處理...
        tpl+=line;
    });
    return "var tpl=\'" + tpl + "\'\nmodule.exports = tpl"; 
}

最終由dash-loader返回的數(shù)據(jù)就好像是從某個CommonJs模塊中讀入的一樣了。

三. loader的編譯器本質(zhì)

了解了loader的基本結(jié)構(gòu)，那么loader里到底應(yīng)該寫點(diǎn)什么才能完成代碼轉(zhuǎn)換呢？這就涉及到了一個新的概念——編譯器(Compiler)。一個基本的編譯器，需要經(jīng)過tokenize,parse,transform,stringify幾個核心步驟，它的應(yīng)用是非常廣的，SPA中的virtual-DOM的解析，babel中的ES6語法解析等等，babel的官網(wǎng)曾經(jīng)推薦過一個非常棒的開源項(xiàng)目（10k+Star），詳細(xì)講述了如何一步一步實(shí)現(xiàn)一個編譯器的，建議感興趣的同學(xué)可以自行學(xué)習(xí)：

【The-Super-Tiny-Compiler】——https://github.com/jamiebuilds/the-super-tiny-compiler

上述就是小編為大家分享的如何解析webpack4.0中Loader概念了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務(wù)器買多久送多久。

名稱欄目：如何解析webpack4.0中Loader概念-創(chuàng)新互聯(lián)
文章出自：http://muchs.cn/article48/cdcjhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、ChatGPT、網(wǎng)頁設(shè)計(jì)公司、自適應(yīng)網(wǎng)站、云服務(wù)器、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)