教你手写webpack常用loader

前言

webpack 作为目前主流的前端构建工具，我们几乎每天都需要与它打交道。个人认为一个好的开源产品壮大的原因应该包括核心开发者的稳定输出以及对应生态的繁荣。对于生态来说， webpack 是一个足够开放的类库，提供了可插拔的方式去自定义一些配置，包括配置 loader 和 plugin ，本篇我们主要讨论loader。

loader 本质上是一个函数，webpack在打包过程中会按照规则顺序调用处理某种文件的 loader ，然后将上一个 loader 产生的结果或者资源文件传入进去，当前 loader 处理完成后再交给下一个 loader 。

loader的类型

开始之前，还是要先大概提一下 loader 的类型以及一些常用的 api ，不感兴趣的同学可以直接跳过这一小节，更详细的指引请参阅官方文档。

loader 主要有以下几种类型：

• 同步 loader ： return 或调用 this.callback 都是同步返回值
• 异步 loader ：是用 this.async() 获取异步函数，是用 this.callback() 返回值
• raw loader ：默认情况下接受 utf-8 类型的字符串作为入参，若标记 raw 属性为 true ，则入参的类型为二进制数据
• pitch loader ： loader 总是从右到左被调用。有些情况下，loader 只关心 request 后面的 元数据(metadata)，并且忽略前一个 loader 的结果。在实际（从右到左）执行 loader 之前，会先从左到右调用 loader 上的 pitch 方法。

开发 loader 时常用的 API 如下：

• this.async ：获取一个 callback 函数，处理异步
• this.callback ：同步 loader 中，返回的方法
• this.emitFile ：产生一个文件
• this.getOptions ：根据传入的 schema 获取对应参数
• this.importModule ：用于子编译器在构建时编译和执行请求
• this.resourcePath ：当前资源文件的路径

Hello Loader

现在假设我们有这么一个需求：在每个文件的头部打上开发者的相关信息。比如打包之前的文件内容是这样的：

const name = 'jay' 

打包之后文件内容可能是这样的：

/** * @Author:jay * @Email:email@qq.com * /const name = 'jay' 

那废话不多说，直接开整。首先把相关依赖安装一下：

//package.json
"webpack": "^5.0.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.10.0" 

再简单的配置一下webpack：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { resolve } = require('path')
module.exports = {mode: 'none',entry: './src/main.js',output: {path: resolve(__dirname, './dist'),filename: 'js/[name].js',clean: true},module: {rules: [{test: /\.js$/,loader: './loaders/hello-loader',},]},plugins: [new HtmlWebpackPlugin({template: './public/index.html'})]
} 

参考webpack视频讲解：进入学习

接下来就可以开始实现这个 loader 了，首先每一个 loader 都是一个函数，这个函数的返回结果要么是二进制数据要么是字符串，字符串就是文件的具体内容，二进制数据就是资源文件比如图片的内容。在上面这个需求中，显然我们只需要拿到文件的内容，做一些修改替换即可。所以可以比较容易的写出下面的代码：

module.exports = function (content) {const newContent = `/** * @Author:jay * @Email:email@qq.com * */${content}`return newContent;
} 

这样就会将对应的内容添加到打包结果中，如下图所示：

获取参数

上面对于文件的一些描述我们是已经写死了，但这样不太灵活，大多数时候是希望能通过 loader 对应的配置去获取对应的参数，我们可以在引入 loader 的时候这样改造一下：

{test: /\.js$/,loader: './loaders/hello-loader',options: {author: 'hello loader',email: 'helloloader@qq.com'}
} 

那么在具体的loader中，可以使用 this.getOptions(schema) 去获取传入的配置。这个 schema 是对 option 的格式校验，代码改造如下：

const schema = {type: 'object', //options是一个对象properties: {//author是一个字符串author: {type: 'string'},//email是一个字符串email: {type: 'string'}}
}
const options = this.getOptions(schema) || {}
co