摘要:本次介紹的則是用來解決這類問題的。實現(xiàn)模塊實現(xiàn)思路將配置內(nèi)的命令的的內(nèi)聯(lián)從前至后組成一個數(shù)組。所有字符串內(nèi)部又可以截取,獲取完整的。分析并解析該數(shù)組內(nèi)的字符串,獲取各個的絕對路徑。
前言
在webpack特性里面,它可以支持將非javaScript文件打包,但前面寫到webpack的模塊化打包只能應(yīng)用于含有特定規(guī)范的JavaScript文件。本次介紹的loader則是用來解決這類問題的。本文章loader的實現(xiàn)基于code-splitting
功能分析舉個例子:
webpack.config.js中的配置loader
module: { rules: [ { test: /.js$/, loader: "test-loader!test-loader2" } ] }
業(yè)務(wù)代碼中的內(nèi)聯(lián)loader
require("d!c");
分析:
我們需要將這些loader解析成可運行的函數(shù),并在parse模塊解析語法樹之前運行掉這些loader函數(shù)
所以我們需要:
resolve模塊:分析出module對應(yīng)的loader字符串,并解析出各個loader的絕對路徑
buildDeps模塊:通過文件路徑獲取需要運行的loader函數(shù),將其壓入隊列,之后再依次按序遞歸出loader函數(shù)運行,如果是異步loader,則要通過回調(diào)函數(shù)來遞歸下一個loader函數(shù)。
實現(xiàn) resolve 模塊實現(xiàn)思路:
將配置內(nèi)的loaders,shell命令的loaders,require/import的內(nèi)聯(lián)loader從前至后組成一個數(shù)組。配置內(nèi)的loaders需要正則匹配test屬性,來獲取配置內(nèi)的loader字符串。所有l(wèi)oader字符串內(nèi)部又可以截取"!",獲取完整的loader。
分析并解析該數(shù)組內(nèi)的字符串,獲取各個loader的絕對路徑。并返回解析好的字符串。這塊的實現(xiàn)和文件打包類似。
最終require內(nèi)的字符串如下
/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.jsbuildDeps模塊
實現(xiàn)思路:
解析文件路徑,并獲取需要運行的loader函數(shù),存入數(shù)組
數(shù)組在通過pop函數(shù)一個個遞歸,考慮到存在異步loader函數(shù)的情況,需要為運行函數(shù)提供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
(完)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/108049.html
摘要:筆者系貢獻者之一官方說明簡單來說就是將文件變成,然后放入瀏覽器運行。部分首先分析部分從做右到左,也就是被先后被和處理過了。源碼解析之二源碼解析之三寫作中源碼解析之四寫作中作者博客作者微博 筆者系 vue-loader 貢獻者(#16)之一 官方說明 vue-loader is a loader for Webpack that can transform Vue components ...
摘要:當前正在處理的節(jié)點,以及該節(jié)點的和等信息。源碼解析之一整體分析源碼解析之三寫作中源碼解析之四寫作中作者博客作者作者微博 筆者系 vue-loader 貢獻者之一(#16) 前言 vue-loader 源碼解析系列之一,閱讀該文章之前,請大家首先參考大綱 vue-loader 源碼解析系列之 整體分析 selector 做了什么 const path = require(path) co...
摘要:流程劃分縱觀整個打包過程,可以流程劃分為四塊。核心類關(guān)系圖功能實現(xiàn)模塊通過將源碼解析為樹并拆分,以及直至基礎(chǔ)模塊。通過的依賴和切割文件構(gòu)建出含有和包含關(guān)系的對象。通過模版完成主入口文件的寫入,模版完成切割文件的寫入。 前言 插件plugin,webpack重要的組成部分。它以事件流的方式讓用戶可以直接接觸到webpack的整個編譯過程。plugin在編譯的關(guān)鍵地方觸發(fā)對應(yīng)的事件,極大的...
摘要:引言通過前面幾張的鋪墊下面開始分析源碼核心流程大體上可以分為初始化編譯輸出三個階段下面開始分析初始化這個階段整體流程做了什么啟動構(gòu)建,讀取與合并配置參數(shù),加載,實例化。推薦源碼之源碼之機制源碼之簡介源碼之機制參考源碼 引言 通過前面幾張的鋪墊,下面開始分析webpack源碼核心流程,大體上可以分為初始化,編譯,輸出三個階段,下面開始分析 初始化 這個階段整體流程做了什么? 啟動構(gòu)建,讀...
摘要:執(zhí)行完成后會返回如下圖的結(jié)果,根據(jù)返回數(shù)據(jù)把源碼和存儲在的屬性上的回調(diào)函數(shù)中調(diào)用類生成,并根據(jù)生成依賴后回調(diào)方法返回類。 webpack設(shè)計模式 一切資源皆Module Module(模塊)是webpack的中的關(guān)鍵實體。Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊. 通過Loaders(模塊轉(zhuǎn)換器),用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新模塊內(nèi)容. 事件驅(qū)動架構(gòu) we...
閱讀 1457·2023-04-25 19:00
閱讀 4158·2021-11-17 17:00
閱讀 1771·2021-11-11 16:55
閱讀 1530·2021-10-14 09:43
閱讀 3132·2021-09-30 09:58
閱讀 860·2021-09-02 15:11
閱讀 2130·2019-08-30 12:56
閱讀 1408·2019-08-30 11:12