成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack源碼之loader機(jī)制

dmlllll / 3038人閱讀

摘要：用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。甚至允許你直接在模塊中文件和區(qū)別之前一篇文章中介紹了機(jī)制和今天研究的對(duì)象他們兩者在一起極大的拓展了的功能。原理說(shuō)明上面是源碼中執(zhí)行關(guān)鍵步驟遞歸的方式執(zhí)行執(zhí)行機(jī)流程似于中間件機(jī)制參考源碼參考文檔

loader概念

loader是用來(lái)加載處理各種形式的資源,本質(zhì)上是一個(gè)函數(shù), 接受文件作為參數(shù),返回轉(zhuǎn)化后的結(jié)構(gòu)。

loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。loader 可以使你在 import 或"加載"模塊時(shí)預(yù)處理文件。因此，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”，并提供了處理前端構(gòu)建步驟的強(qiáng)大方法。loader 可以將文件從不同的語(yǔ)言（如 TypeScript）轉(zhuǎn)換為 JavaScript，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！
loader和plugin區(qū)別

之前一篇文章中介紹了plugin機(jī)制,和今天研究的對(duì)象loader,他們兩者在一起極大的拓展了webpack的功能。它們的區(qū)別就是loader是用來(lái)對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換,而插件目的在于解決 loader 無(wú)法實(shí)現(xiàn)的其他事。為什么這么多說(shuō)呢?因?yàn)閜lugin可以在任何階段調(diào)用,能夠跨Loader進(jìn)一步加工Loader的輸出,執(zhí)行預(yù)先注冊(cè)的回調(diào),使用compilation對(duì)象做一些更底層的事情。

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"

說(shuō)明 上面三種使用方法作用都是將一組鏈?zhǔn)降?loader, 按照從右往左的順序執(zhí)行,loader 鏈中的第一個(gè) loader 返回值給下一個(gè) loader。先使用css-loader解析 @import 和 url()路徑中指定的css內(nèi)容,然后用style-loader 會(huì)把原來(lái)的 CSS 代碼插入頁(yè)面中的一個(gè) style 標(biāo)簽中。

loader實(shí)現(xiàn) 
//將css插入到head標(biāo)簽內(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倉(cāng)庫(kù),然后添加到依賴,按照方式1中的配置方式使用即可

說(shuō)明 上面是一個(gè)簡(jiǎn)單的loader實(shí)現(xiàn),同步的方式執(zhí)行,相當(dāng)于實(shí)現(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);
                }
            }
        );
    });
}

說(shuō)明 上面是webpack源碼中l(wèi)oader執(zhí)行關(guān)鍵步驟,遞歸的方式執(zhí)行l(wèi)oader,執(zhí)行機(jī)流程似于express中間件機(jī)制

參考源碼
webpack: "4.4.1"
webpack-cli: "2.0.13"
參考文檔
https://webpack.js.org/concep...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93998.html

相關(guān)文章

  • webpack源碼之運(yùn)行流程

    摘要：引言通過(guò)前面幾張的鋪墊下面開始分析源碼核心流程大體上可以分為初始化編譯輸出三個(gè)階段下面開始分析初始化這個(gè)階段整體流程做了什么啟動(dòng)構(gòu)建，讀取與合并配置參數(shù)，加載，實(shí)例化。推薦源碼之源碼之機(jī)制源碼之簡(jiǎn)介源碼之機(jī)制參考源碼 引言 通過(guò)前面幾張的鋪墊,下面開始分析webpack源碼核心流程,大體上可以分為初始化,編譯,輸出三個(gè)階段,下面開始分析 初始化 這個(gè)階段整體流程做了什么? 啟動(dòng)構(gòu)建，讀...

    kviccn 評(píng)論0 收藏0

  • JavaScript - 收藏集 - 掘金

    摘要：插件開發(fā)前端掘金作者原文地址譯者插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內(nèi)優(yōu)雅的實(shí)現(xiàn)文件分片斷點(diǎn)續(xù)傳。 Vue.js 插件開發(fā) - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。插....

    izhuhaodev 評(píng)論0 收藏0

  • webpack源碼之plugin機(jī)制

    摘要：調(diào)用的目的是為了注冊(cè)你的邏輯指定一個(gè)綁定到自身的事件鉤子。這個(gè)對(duì)象在啟動(dòng)時(shí)被一次性建立，并配置好所有可操作的設(shè)置，包括，和。對(duì)象代表了一次資源版本構(gòu)建。一個(gè)對(duì)象表現(xiàn)了當(dāng)前的模塊資源編譯生成資源變化的文件以及被跟蹤依賴的狀態(tài)信息。 引言 在上一篇文章Tapable中介紹了其概念和一些原理用法,和這次討論分析webpack plugin的關(guān)聯(lián)很大。下面從實(shí)現(xiàn)一個(gè)插件入手。 demo插件 f...

    glumes 評(píng)論0 收藏0

  • webpack源碼分析之三：loader

    摘要：本次介紹的則是用來(lái)解決這類問(wèn)題的。實(shí)現(xiàn)模塊實(shí)現(xiàn)思路將配置內(nèi)的命令的的內(nèi)聯(lián)從前至后組成一個(gè)數(shù)組。所有字符串內(nèi)部又可以截取，獲取完整的。分析并解析該數(shù)組內(nèi)的字符串，獲取各個(gè)的絕對(duì)路徑。 前言 在webpack特性里面，它可以支持將非javaScript文件打包,但前面寫到webpack的模塊化打包只能應(yīng)用于含有特定規(guī)范的JavaScript文件。本次介紹的loader則是用來(lái)解決這類問(wèn)題的...

    laznrbfe 評(píng)論0 收藏0

  • 單文件組件下的vue，可以擦出怎樣的火花

    摘要：線上另加入了排行榜功能，如需查看源碼的，請(qǐng)切換到分支整個(gè)項(xiàng)目結(jié)構(gòu)清晰，尤其單文件組件的表現(xiàn)力尤為突出，使得每個(gè)組件的邏輯都沒(méi)有過(guò)于復(fù)雜，而且在的統(tǒng)籌下，的單向數(shù)據(jù)流模式使得所有的變化都在可控制可預(yù)期的范圍內(nèi)。 2016注定不是個(gè)平凡年，無(wú)論是中秋節(jié)問(wèn)世的angular2，還是全面走向穩(wěn)定的React，都免不了面對(duì)另一個(gè)競(jìng)爭(zhēng)對(duì)手vue2。喜歡vue在設(shè)計(jì)思路上的先進(jìn)性(原諒我用了這么一個(gè)...

    Keven 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<