20190329期如何实现一个Loader？我们在上几节有讲过loader,今天我们来深入了解它们,最暴力的方式莫过于动手实现它们好了，回到正题, 先来回顾一下loaderloader定义: 用于对模块的源代码进行转换。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 的 optionsimport { 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 apiwebpack为我们还提供了工具函数集——loader-utils关于JS每日一题JS每日一题可以看成是一个语音答题社区 每天利用碎片时间采用60秒内的语音形式来完成当天的考题 群主在次日0点推送当天的参考答案注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路点击加入答题