专栏首页coding个人笔记我已经会手写没用的loader了

我已经会手写没用的loader了

webpack的loader配置应该谁都会,讲道理,我们会使用loader,会配置loader就够了。今天只是了解loader的基本概念和基本的运行原理,了解了就能自己写一个loader了,至于手写一些复杂的loader目前就算了。

先说说webpack中文网对loader的一些介绍:

loader是用于对模块的源代码进行转换,可以在你import或加载模块时预处理文件。loader可以将不同语言(typescript)转换成JavaScript、将内联图像转成data URL、在JavaScript中import css文件。loader有一些特性,loader 支持链式传递。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader,返回webpack所预期的JavaScript。loader可以是同步也可以是异步。loader 模块需要导出为一个函数,并且使用 Node.js 兼容的 JavaScript 编写。内容不多,其实可以去看看,还有几个特性可以看看。

需要注意的几点:

loader就是一个函数,要返回js的脚本

loader要遵循单一原则,只做一件事,所以要有style-loader、css-loader,而不是整合成一个loader

可以链式调用,从右往左,从下往上

loader要是无状态的,不同模块之间不保存状态,要能够单一运行。

配置好常规配置,然后loader指向自己写的loader(loader/loader.js):

use: path.resolve(__dirname, 'loader', 'loader')

需要绝对路径,也可以这样:

resolveLoader: {

// alias: {

// loader: path.resolve(__dirname, 'loader', 'loader')

// },

modules: ['node_modules', path.resolve(__dirname, 'loader')]

}

两个选一个,第一个是别名,第二个是loader默认从node_module里面找,找不到就到loader文件夹里面找。

loade.js里面内容:

function loader(resource){

console.log(resource)

return resource

}

module.exports = loader;

参数resource就是js的代码,如果return的内容是数字,就会报错,因为要返回预期的JavaScript:

Module build failed: Error: Final loader (./loader/loader.js) didn't return a Buffer or String

控制台打印(index.js引入a.js):

loader的运行原理挺简单的,并不复杂,复杂的是要怎么去处理传递进来的代码。

说说loader的几个模式,优先级顺序:pre、normal、inline、post

清空index.js,然后引入loader1、loader2、loader3,分别打印文件名:

use: ['loader1', 'loader2', 'loader3']

这边没有设置什么,就是默认顺序,都是normal,接着设置:

{

test: /\.js$/,

use: 'loader1',

enforce: 'pre'

},

{

test: /\.js$/,

use: 'loader2'

},

{

test: /\.js$/,

use: 'loader3',

enforce: 'post'

}

打印出来:

inline比较特殊,如果上面都不干预,新建一个inline-loader.js,引入文件的时候使用:

let str = require('-!inline-loader!./a.js')

打印:

-!表示不再用pre和normal的loader处理,所以这边走完inline-loader之后只执行设置post的loader3,另外还有两种,!不走normal,!!什么都不走,只走inline-loader。

loader有两部分组成,pitch和normal,先执行pitch,如果pitch有返回值,则直接跳过接下去的loader直接返回,包括自己,给每个loader加pitch方法并打印:

loader.pitch = function(resource){

console.log('loader1 pitch')

}

打印:

这边先执行pitch再执行normal,我如果在loader3 pitch这边添加return ‘’,打印:

loader还有很多api,比如异步loader的this.async(),this.callback返回多个结果的函数、通过loader-utils(需要自己安装依赖)获取配置的options参数等等,可以去官网看一下:

https://www.webpackjs.com/api/loaders/#this-target

loader大概就先了解到这样,async和callback使用其实更重要,如果要编写有用的loader要好好研究,今天就不去尝试。 loader运行过程其实不难,难得应该是内部的解析过程。

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:coding个人笔记

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端缓存之HTTP缓存

    说真的,当自己还很小白的时候,明明修改了JS的内容了,但是就是没有加载成功,那时候感觉好神奇,好没道理。后来知道了这是因为缓存的原因。

    wade
  • 记一次后台注入cookie

    快两个月没有日记了,过了将近一个月猪一样的生活,天天吃了睡睡了吃,也都不学习。这两星期在家办公,在调试后台注入cookie遇见了一些问题,记录一下。

    wade
  • cookie

    Cookie曾一度用于客户端数据的存储,因当时并没有其它合适的存储办法而作为唯一的存储手段,但现在随着现代浏览器开始支持各种各样的存储方式,Cookie渐渐被淘...

    wade
  • 手把手教你撸一个 Webpack Loader

    文:小 boy(沪江网校Web前端工程师) 本文原创,转载请注明作者及出处 ? 经常逛 webpack 官网的同学应该会很眼熟上面的图。正如它宣传的一样,w...

    iKcamp
  • 手把手教你撸一个 Webpack Loader

    经常逛 webpack 官网的同学应该会很眼熟上面的图。正如它宣传的一样,webpack 能把左侧各种类型的文件(webpack 把它们叫作「模块」)统一打包为...

    前端博客 : alili.tech
  • wepack中loader的分类

    enforce 属性会影响 loader 种类。不论是普通的,前置的,后置的 loader。

    Qiang
  • 玩转webpack之loader开发

    webpack提倡一切皆模块,所有类型的文件都可以经过文件加载器处理变成我们可加载的模块,那么这个文件加载器便是loader。

    IMWeb前端团队
  • webpack中的loader

    loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(t...

    刘亦枫
  • 看完这篇webpack-loader,不再怕面试官问了

    下面会从基本使用开始出发,探究一个loader怎么写,并实现raw-loader、json-loader、url-loader、bundle-loader

    lhyt
  • 玩转webpack之loader开发

    webpack提倡一切皆模块,所有类型的文件都可以经过文件加载器处理变成我们可加载的模块,那么这个文件加载器便是loader。

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券