webpack源碼之loader機制

dmlllll 發布于2019-08-22 16:03 / 3033人閱讀

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

loader概念

loader是用來加載處理各種形式的資源,本質上是一個函數, 接受文件作為參數,返回轉化后的結構。

loader 用于對模塊的源代碼進行轉換。loader 可以使你在 import 或"加載"模塊時預處理文件。因此，loader 類似于其他構建工具中“任務(task)”，并提供了處理前端構建步驟的強大方法。loader 可以將文件從不同的語言（如 TypeScript）轉換為 JavaScript，或將內聯圖像轉換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！

loader和plugin區別

之前一篇文章中介紹了plugin機制,和今天研究的對象loader,他們兩者在一起極大的拓展了webpack的功能。它們的區別就是loader是用來對模塊的源代碼進行轉換,而插件目的在于解決 loader 無法實現的其他事。為什么這么多說呢?因為plugin可以在任何階段調用,能夠跨Loader進一步加工Loader的輸出,執行預先注冊的回調,使用compilation對象做一些更底層的事情。

loader用法 配置

module: {
    rules: [
      {
        test: /.css$/,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader"
          }
        ]
      }
    ]
  }

內聯

import Styles from "style-loader!css-loader?modules!./styles.css";

CLI

webpack --module-bind "css=style-loader!css-loader"

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

loader實現

//將css插入到head標簽內部
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發布到npm倉庫,然后添加到依賴,按照方式1中的配置方式使用即可

說明上面是一個簡單的loader實現,同步的方式執行,相當于實現了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源碼中loader執行關鍵步驟,遞歸的方式執行loader,執行機流程似于express中間件機制

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

云服務器 GPU云服務器源碼中文說明之 java安全機制源碼 Loaders Loader

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93998.html

webpack源碼之運行流程

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

kviccn 2019-08-22 16:04 評論0 收藏0
JavaScript - 收藏集 - 掘金

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

izhuhaodev 2019-08-21 11:44 評論0 收藏0
webpack源碼之plugin機制

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

glumes 2019-08-22 15:51 評論0 收藏0
webpack源碼分析之三：loader

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

laznrbfe 2019-08-26 12:01 評論0 收藏0
單文件組件下的vue，可以擦出怎樣的火花

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

Keven 2019-08-19 18:21 評論0 收藏0