面试题：Webpack自定义加载器的实现与应用场景

编写自定义Webpack加载器

基本结构
- 一个Webpack加载器本质上是一个Node.js模块，它导出一个函数。这个函数接收源文件的内容作为参数，并返回转换后的内容。
- 示例代码框架如下：

module.exports = function (source) {
    // 加载器逻辑
    return output;
};

输入处理逻辑
- 输入的source是源文件的字符串内容。在加载器函数中，可以根据需要对这个字符串进行解析、修改等操作。
- 例如，如果要处理的是一个JavaScript文件，并且想把所有的console.log替换为console.error，可以这样做：

module.exports = function (source) {
    return source.replace(/console.log/g, 'console.error');
};

输出处理逻辑
- 加载器返回的结果应该是经过处理后的代码字符串。如果加载器需要异步处理（例如进行网络请求等操作），可以返回一个Promise。
- 异步加载器示例：

module.exports = function (source) {
    const callback = this.async();
    setTimeout(() => {
        const newSource = source + '\n// 异步添加的注释';
        callback(null, newSource);
    }, 1000);
};

这里使用this.async()获取一个回调函数callback，callback的第一个参数为错误（如果有），第二个参数为处理后的代码。

适用场景举例

CSS预处理后处理
- 假设项目使用了Less或Sass进行CSS预处理，在预处理完成后，可能需要对生成的CSS进行进一步处理，比如自动添加浏览器前缀。可以编写一个自定义加载器，在CSS预处理加载器之后运行，对CSS内容进行处理，添加浏览器前缀。
图片转Base64
- 在一些小型前端项目中，为了减少HTTP请求数量，可能希望将一些小图片直接转换为Base64编码嵌入到CSS或JavaScript中。可以编写一个自定义加载器，当加载图片文件时，将其转换为Base64字符串，并根据需求插入到相应的代码中。例如，在CSS文件中引用图片时，加载器将图片路径替换为Base64编码字符串，从而减少图片的HTTP请求。
特定语法转换
- 如果团队在前端代码中使用了一种自定义的模板语法，而Webpack默认的加载器无法处理。可以编写一个自定义加载器，将这种自定义模板语法转换为JavaScript或其他Webpack能够处理的形式。比如团队使用了一种类似${varName}的简单变量替换语法，自定义加载器可以将其转换为JavaScript中合适的变量引用形式。

星途面试题库

面试题：Webpack自定义加载器的实现与应用场景

知识考点

面试题答案

编写自定义Webpack加载器

适用场景举例