Q4 · Webpack

是否写过 loader？简单描述一下编写 loader 的思路？

Webpackloader自定义

⚡ 速记答案（30 秒）

本质：输入字符串 → 输出处理后的字符串（或 Buffer）
导出一个函数 (source) => transformedSource，内部可以做 AST 处理、字符串替换等
优先保持无状态、纯函数，需要异步时使用 this.async()
通过 this.query / this.getOptions() 读取配置
返回的必须是 JS 源码字符串（或让下一个 loader 能识别的格式）

📖 详细讲解

Loader 本质

源代码 (String/Buffer)
      ↓ loader 处理
转换后的代码 (String/Buffer)

编写要点

1. 同步 Loader

module.exports = function(source) {
  return source.replace(/foo/g, 'bar');
};

2. 异步 Loader

module.exports = function(source) {
  const callback = this.async();
  asyncTransform(source).then(result => {
    callback(null, result);
  });
};

3. 获取配置

const options = this.getOptions();

注意事项

• 保持无状态

• 处理错误要调用 callback(err)

• 可以返回 SourceMap

💻 代码示例

简单的 Markdown Loader

const marked = require('marked');

module.exports = function(source) {
  // 1. 获取配置
  const options = this.getOptions();
  
  // 2. 转换 Markdown 为 HTML
  const html = marked(source, options);
  
  // 3. 返回 JS 模块
  return `export default ${JSON.stringify(html)}`;
};

💡

面试技巧：回答工程化问题时，结合你实际项目中的配置和优化经验，更有说服力。