Webpack如何实现一个Loader?

访客4年前关于黑客接单917
loader界说: 用于对模块的源代码举行转换。loader 可以使你在 import 或"加载"模块时预处置文件

简朴使用

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            // loader 是导出为一个a函数的 node 模块。该函数在 loader 转换资源的时刻挪用
            // 给定的函数将挪用 loader API,并通过 this 上下文接见
            loader: path.resolve('loader.js'),
            options: {/* ... */}
          }
        ]
      }
    ]
  }
};

回首了loader的界说及简朴使用后,我们再来剖析一下实现loader的思绪

  • 单一职责,一个loader只做一件事
  • 链式组合,链中的每个 loader 会将转换应用在已处置过的资源上
  • 模块化,是导出为一个函数的 node 模块
  • 参数合并,loader 可以通过 options 工具设置

基于上面剖析的几点,我们更先着手

// 这个就是一个最简朴loader,
// 若是我们的loader有依赖其它模块,也得以module的写法将在在顶部引入
import fs from 'fs';
export default function(source){
    return source
}

我们发现上面直接使用了return,是因为是同步类的loader且返回的内容唯一,若是你希望你的loader支持链式挪用,将效果返给下一个loader继续使用,这时刻就需要用webpack提供的api

这里我们简朴看一下this.callback的界说,一个可以同步或者异步挪用的可以返回多个效果的函数。预期的参数是

this.callback(
  err: Error | null,
  content: string | Buffer,
  sourceMap?: SourceMap,
  meta?: any
)
// loader-utils 它提供了许多有用的工具
// 最常用的一个就是获取传入 loader 的 options
import { getOptions } from 'loader-utils';
export default function(source, other) {
  const options = getOptions(this)    
  // do whatever you want
  // ...
  this.callback(null, source, other)
}

手写一个loader对没有研究过的听上去似乎有点难,事实上, 掌握上面所先容的内容及头脑,就可以更先写一个简朴的 Loader 了, 我们再来用简朴的代码绥一下loader到底是什么?

// 首先loader它是一个node模块,这很好明白
export const lessToCss = function(source, other) {
    // source 就是你即将要转换的文件源
    // TODO
    // 将转换好的文件源流转至一个管道
    this.callback(null, source, other)
}
让你的loader更好用

loader api中有几个好用的家伙这里就顺便带一下

  • this.cacheable() 从提高执行效率上,若何处置行使缓存是极其重要的, webpack 中this.cacheable就可以轻松将loader缓存了
  • this.async() 当一个loader无依赖时,我们应该异步的去返回效果
案例剖析

下方贴上less-loader的源码,代码很简练,连系上方我们所剖析的,也很容易明白

import processResult from './processResult';
const render = pify(less.render.bind(less));

function lessLoader(source) {
  const loaderContext = this;
  const options = getOptions(loaderContext);
  const done = loaderContext.async();
  const isSync = typeof done !== 'function';

  if (isSync) {
    throw new Error(
      'Synchronous compilation is not supported anymore. See https://github.com/webpack-contrib/less-loader/issues/84'
    );
  }
  processResult(loaderContext, render(source, options));
}


总结

  • loader是一个node模块
  • 编写loader时要遵照单一原则,每个loader只做一种"转义"事情
  • webpack为我们提供了厚实的loader api
  • webpack为我们还提供了工具函数集——loader-utils


思源资源网:分类流动

1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

相关文章

微信清空删除的聊天记录怎么恢复(如何找回删除的微信聊天记录)

微信清空删除的聊天记录怎么恢复(如何找回删除的微信聊天记录)微信聊天删除聊天框会同步删除聊天记录吗? 可看着满屏幕的聊天框,真的让处女座抓狂啊! 近日,随着安卓新版微信的推出 这问题终于可以解决...

显卡驱动有什么用(显卡驱动选购技巧)

显卡驱动有什么用(显卡驱动选购技巧)

  显卡在我们电脑中是非常重要的一部分,选择一个适合的显卡驱动对显卡性能发挥有着重要任用,如果选择一个不好的显卡驱动,会导致玩游戏FPS值低以及玩游戏卡顿!游戏加速器www.ipdaili.co...

dnf下级元素结晶怎么做成上级,dnf下级元素结晶获得方法!

dnf下级元素结晶怎么做成上级,dnf下级元素结晶获得方法!

本日,我突发奇想,去下水道看红狗的客栈,发明尚有一万多块陨石没有解析。 我以前是个傻瓜。几个牢狱里有近30,000块陨石,全部在变粉后自行解析,没有高级元素的结晶。 厥后,我相识到我必需利用系统解...

辣游记重庆九宫格火锅加盟条件是什么?为你准备好了

辣游记重庆九宫格火锅加盟条件是什么?为你准备好了

此刻创业的人数是越来越多的,想要在浩瀚的品牌中选择一个适合本身的也长短常不容易的,这时候辣游记重庆九宫格暖锅加盟的呈现就很好的为列位提供了一个时机和但愿,全方面的支持和保障,可以或许让各人顺利的开店策...

黑客帝国手办图片(黑客帝国手绘海报)

黑客帝国手办图片(黑客帝国手绘海报)

本文目录一览: 1、求黑客帝国封套高清资源~高清的最好,谢谢!! 2、有黑客帝国封套原图资源嘛,高清免费谢谢!! 3、求黑客帝国3:矩阵革命剧照最新资源~高清的最好,谢谢!! 4、求黑客帝...

黑客3经典片段(黑客帝国3电影)

黑客3经典片段(黑客帝国3电影)

本文目录一览: 1、英语电影片段短句 2、哪些电影里有黑客对决的片段 3、电影中有哪些经典的离别,分手时的画面 4、外国电视剧,可能是美剧,记忆中剧情片段,求片名。 5、一部电影,有一...