Webpack如何实现Loader？（附代码）

本篇文章给大家带来的内容是关于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只做一件事

模块化,是导出为一个函数的 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中有几个好用的家伙这里就顺便带一下

案例分析

下方贴上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？（附代码）的详细内容，更多内容请关注技术你好其它相关文章！