webpack源碼之loader機制詳解

2024-05-06 16:43:35

字體：大中小

來源：轉載

供稿：網友

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;}//使用方式1resolveLoader: {  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中間件機制

參考源碼