webpack源碼之loader機制詳解

更新時間：2018年04月06日 10:36:33 作者：jsdt

本篇文章主要介紹了webpack源碼之loader機制詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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的輸出,在構(gòu)建運行期間,觸發(fā)事件,執(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中間件機制

參考源碼