webpack-loader 开发起步

1. Loader的基本结构

// 同步loader
module.exports = function(source) {
  // source是源文件的内容
  // 返回处理后的内容
  return source;
};

// 异步loader
module.exports = function(source) {
  const callback = this.async();
  
  // 异步处理
  someAsyncOperation(source, (err, result) => {
    if (err) return callback(err);
    callback(null, result);
  });
};

2. 最简单的Loader示例

// simple-loader.js
module.exports = function(source) {
  // 在源文件开头添加注释
  return `// 这是通过loader添加的注释\n${source}`;
};

3. 常用的Loader开发模式

module.exports = function(source) {
  // 1. 获取loader的配置选项
  const options = this.getOptions();
  
  // 2. 处理源文件
  const result = processSource(source, options);
  
  // 3. 返回处理后的内容
  return result;
};

// 处理源文件的函数
function processSource(source, options) {
  // 实现具体的处理逻辑
  return source;
}

4. 实际开发步骤

// 1. 创建loader文件
// my-loader.js
module.exports = function(source) {
  // 2. 获取配置
  const options = this.getOptions();
  
  // 3. 处理源文件
  let result = source;
  
  // 4. 应用转换
  if (options.prefix) {
    result = `${options.prefix}\n${result}`;
  }
  
  // 5. 返回结果
  return result;
};

// 6. 添加loader的配置验证
module.exports.pitch = function(remainingRequest) {
  // 在loader执行前进行验证
  if (remainingRequest.includes('node_modules')) {
    return '// 跳过node_modules中的文件';
  }
};

5. 在webpack配置中使用

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: path.resolve('./my-loader.js'),
            options: {
              prefix: '// 自定义前缀'
            }
          }
        ]
      }
    ]
  }
};

6. 常用的开发场景

// 1. 文件转换
module.exports = function(source) {
  // 将文件内容转换为大写
  return source.toUpperCase();
};

// 2. 添加元数据
module.exports = function(source) {
  // 添加文件信息
  const fileInfo = {
    size: source.length,
    timestamp: new Date().toISOString()
  };
  
  return `/* ${JSON.stringify(fileInfo)} */\n${source}`;
};

// 3. 条件处理
module.exports = function(source) {
  // 根据条件处理文件
  if (this.resourcePath.includes('test')) {
    return `// 测试文件\n${source}`;
  }
  return source;
};

7. 开发建议

• 保持loader的单一职责
• 使用异步处理大量计算
• 做好错误处理
• 添加适当的缓存
• 考虑性能影响
• 提供清晰的配置选项

8. 调试技巧

module.exports = function(source) {
  // 输出调试信息
  console.log('Loader处理文件:', this.resourcePath);
  console.log('源文件内容:', source);
  
  // 使用this.emitFile输出调试文件
  this.emitFile('debug.log', source);
  
  return source;
};

9. 最佳实践

• 使用TypeScript增加类型安全
• 添加单元测试
• 提供详细的文档
• 考虑兼容性
• 遵循webpack loader规范
• 使用loader-utils工具包

10. 发布loader

• 创建package.json
• 添加必要的依赖
• 配置入口文件
• 添加README文档
• 发布到npm

11. 常用工具

const loaderUtils = require('loader-utils');
const validateOptions = require('schema-utils');

// 获取loader配置
const options = loaderUtils.getOptions(this);

// 验证配置
const schema = {
  type: 'object',
  properties: {
    prefix: {
      type: 'string'
    }
  }
};
validateOptions(schema, options, 'My Loader');

12. 性能优化

module.exports = function(source) {
  // 启用缓存
  this.cacheable();
  
  // 使用缓存
  const cacheKey = loaderUtils.interpolateName(
    this,
    '[hash].[ext]',
    { content: source }
  );
  
  // 处理文件
  return processWithCache(source, cacheKey);
};

总结

好的loader应该是：

1. 功能单一
2. 配置灵活
3. 性能良好
4. 易于使用
5. 文档完善
6. 可测试性强
7. 错误处理完善
8. 支持缓存