webpack源碼分析之三：loader

laznrbfe 發(fā)布于2019-08-26 12:01 / 944人閱讀

摘要：本次介紹的則是用來解決這類問題的。實現(xiàn)模塊實現(xiàn)思路將配置內的命令的的內聯(lián)從前至后組成一個數組。所有字符串內部又可以截取，獲取完整的。分析并解析該數組內的字符串，獲取各個的絕對路徑。

前言

在webpack特性里面，它可以支持將非javaScript文件打包,但前面寫到webpack的模塊化打包只能應用于含有特定規(guī)范的JavaScript文件。本次介紹的loader則是用來解決這類問題的。本文章loader的實現(xiàn)基于code-splitting

功能分析

舉個例子：

webpack.config.js中的配置loader

    module: {
            rules: [
                {
                    test: /.js$/,
                    loader: "test-loader!test-loader2"
                }
            ]
        }

業(yè)務代碼中的內聯(lián)loader

require("d!c");

分析：

我們需要將這些loader解析成可運行的函數,并在parse模塊解析語法樹之前運行掉這些loader函數

所以我們需要:

resolve模塊:分析出module對應的loader字符串,并解析出各個loader的絕對路徑

buildDeps模塊:通過文件路徑獲取需要運行的loader函數,將其壓入隊列，之后再依次按序遞歸出loader函數運行,如果是異步loader,則要通過回調函數來遞歸下一個loader函數。

實現(xiàn) resolve 模塊

實現(xiàn)思路:

將配置內的loaders,shell命令的loaders,require/import的內聯(lián)loader從前至后組成一個數組。配置內的loaders需要正則匹配test屬性，來獲取配置內的loader字符串。所有l(wèi)oader字符串內部又可以截取"!"，獲取完整的loader。

分析并解析該數組內的字符串，獲取各個loader的絕對路徑。并返回解析好的字符串。這塊的實現(xiàn)和文件打包類似。

最終require內的字符串如下

/Users/zhujian/Documents/workspace/webpack/simple-webpack/example/node_modules/d.js!
/Users/zhujian/Documents/workspace/webpack/simple-webpack/example/node_modules/test-loader/index.js!
/Users/zhujian/Documents/workspace/webpack/simple-webpack/example/node_modules/test-loader2/index.js!
/Users/zhujian/Documents/workspace/webpack/simple-webpack/example/node_modules/c.js

buildDeps模塊

實現(xiàn)思路:

解析文件路徑,并獲取需要運行的loader函數,存入數組

數組在通過pop函數一個個遞歸,考慮到存在異步loader函數的情況,需要為運行函數提供async,以及callback的上下文。具體的上下文可參考Loader API

loader遞歸邏輯如下:

    nextLoader.apply(null, content);
    function nextLoader() {
        const args = Array.prototype.slice.apply(arguments);
        if (loaderFunctions.length > 0) {
            const loaderFunction = loaderFunctions.pop();
            let async = false;
            const context = {
                fileName,
                options,
                debug: options.debug,
                async: function () {
                    async = true;
                    return nextLoader;
                },
                callback: function () {
                    async = true;
                    nextLoader.apply(null, arguments)
                }
            };
            const resVal = loaderFunction.apply(context, args);
            if (!async) {
                nextLoader(resVal);
            }
        } else {
            callback(null, args[0])
        }
    }

測試

將以上3個loader,test-loader,test-loader2,異步loader d.js,打包c.js

test-loader

module.exports = function(content) {
    return content+"
exports.answer = 42;
"
}

test-loader2

module.exports = function(content) {
    return content+"
exports.test2 = test2;
"
}

異步loader d.js

module.exports = function (content) {
    const d = "d";
    this.async();
    const b = content + "
exports.d = 2000;
";
    setTimeout(this.callback.bind(this, b), 2000);
}

c.js

const c = "c";

module.exports = c;

最終打包出來的c.js的代碼如下

....
/* 1 */
/***/(function(module, exports,__webpack_require__) {
const c = "c";

module.exports = c;

exports.test2 = test2;

exports.answer = 42;

exports.d = 2000;

/***/}
....

代碼實現(xiàn)

本人的簡易版webpack實現(xiàn)simple-webpack

(完)

GPU云服務器云服務器 Loaders Loader 源碼分析 babel-loader

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

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

vue-loader 源碼解析系列之整體分析

摘要：筆者系貢獻者之一官方說明簡單來說就是將文件變成，然后放入瀏覽器運行。部分首先分析部分從做右到左，也就是被先后被和處理過了。源碼解析之二源碼解析之三寫作中源碼解析之四寫作中作者博客作者微博筆者系 vue-loader 貢獻者（#16）之一官方說明 vue-loader is a loader for Webpack that can transform Vue components ...

icattlecoder 2019-08-21 17:49 評論0 收藏0
vue-loader 源碼解析系列之 selector

摘要：當前正在處理的節(jié)點，以及該節(jié)點的和等信息。源碼解析之一整體分析源碼解析之三寫作中源碼解析之四寫作中作者博客作者作者微博筆者系 vue-loader 貢獻者之一（#16）前言 vue-loader 源碼解析系列之一，閱讀該文章之前，請大家首先參考大綱 vue-loader 源碼解析系列之整體分析 selector 做了什么 const path = require(path) co...

miqt 2019-08-21 17:58 評論0 收藏0
webpack源碼分析之四：plugin

摘要：流程劃分縱觀整個打包過程，可以流程劃分為四塊。核心類關系圖功能實現(xiàn)模塊通過將源碼解析為樹并拆分，以及直至基礎模塊。通過的依賴和切割文件構建出含有和包含關系的對象。通過模版完成主入口文件的寫入，模版完成切割文件的寫入。前言插件plugin,webpack重要的組成部分。它以事件流的方式讓用戶可以直接接觸到webpack的整個編譯過程。plugin在編譯的關鍵地方觸發(fā)對應的事件，極大的...

yhaolpz 2019-08-23 10:34 評論0 收藏0
webpack源碼之運行流程

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

kviccn 2019-08-22 16:04 評論0 收藏0
FE.SRC-webpack原理梳理

摘要：執(zhí)行完成后會返回如下圖的結果，根據返回數據把源碼和存儲在的屬性上的回調函數中調用類生成，并根據生成依賴后回調方法返回類。 webpack設計模式一切資源皆Module Module(模塊)是webpack的中的關鍵實體。Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊. 通過Loaders(模塊轉換器)，用于把模塊原內容按照需求轉換成新模塊內容. 事件驅動架構 we...

cfanr 2019-08-23 17:08 評論0 收藏0