成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

webpack源碼之loader機制

dmlllll / 3089人閱讀

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

loader概念

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

loader 用于對模塊的源代碼進行轉(zhuǎn)換。loader 可以使你在 import 或"加載"模塊時預(yù)處理文件。因此,loader 類似于其他構(gòu)建工具中“任務(wù)(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的輸出,執(zhí)行預(yù)先注冊的回調(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"

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

loader實現(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倉庫,然后添加到依賴,按照方式1中的配置方式使用即可

說明 上面是一個簡單的loader實現(xiàn),同步的方式執(zhí)行,相當(dāng)于實現(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: "4.4.1"
webpack-cli: "2.0.13"
參考文檔
https://webpack.js.org/concep...

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

轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/93998.html

相關(guān)文章

  • webpack源碼運行流程

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

    kviccn 評論0 收藏0
  • JavaScript - 收藏集 - 掘金

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

    izhuhaodev 評論0 收藏0
  • webpack源碼plugin機制

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

    glumes 評論0 收藏0
  • webpack源碼分析三:loader

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

    laznrbfe 評論0 收藏0
  • 單文件組件下的vue,可以擦出怎樣的火花

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

    Keven 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<