登录  /  注册
首页 > web前端 > js教程 > 正文

Webpack如何实现Loader?(附代码)

不言
发布: 2019-04-03 09:11:36
转载
1780人浏览过

本篇文章给大家带来的内容是关于webpack如何实现loader?(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

如何实现一个Loader?

我们在上几节有讲过loader,今天我们来深入了解它们,最暴力的方式莫过于动手实现它们

好了,回到正题, 先来回顾一下loader

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

【相关推荐:JavaScript视频教程

以上就是Webpack如何实现Loader?(附代码)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号