Rspack 的 Loader 系统是如何工作的？ - 面试题

Rspack 的 Loader 系统是其处理各种文件类型的核心机制，虽然基于 Rust 开发，但设计上充分考虑了与 Webpack Loader 生态的兼容性。以下是 Rspack Loader 系统的详细说明：

Loader 基本概念

Loader 是一种文件转换器，用于将源文件转换为 Rspack 可以处理的模块。Loader 可以：

转换文件类型（如 TypeScript 转 JavaScript）
处理资源文件（如图片、字体）
执行代码转换（如 Babel 转译）
应用代码检查（如 ESLint）

Loader 配置方式

基本配置

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  }
}

多个 Loader

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  }
}

Loader 选项

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

常用 Loader

1. Babel Loader

用于转译 ES6+ 代码：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
    ]
  }
}

2. CSS Loader

处理 CSS 文件：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: false,
              sourceMap: true
            }
          }
        ]
      }
    ]
  }
}

3. File Loader

处理文件资源：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[hash][ext][query]'
        }
      }
    ]
  }
}

4. URL Loader

内联小文件：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8192
          }
        }
      }
    ]
  }
}

内置 Loader

Rspack 提供了一些内置的 Loader：

1. builtin:swc-loader

超快的 JavaScript/TypeScript 编译器：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true
              },
              transform: {
                react: {
                  runtime: 'automatic'
                }
              }
            }
          }
        }
      }
    ]
  }
}

2. builtin:css-loader

内置的 CSS Loader：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'builtin:css-loader'
        ]
      }
    ]
  }
}

Loader 执行顺序

Loader 从右到左、从下到上执行：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',       // 3. 将 CSS 注入到 DOM
          'css-loader',         // 2. 解析 CSS
          'sass-loader'         // 1. 编译 SCSS
        ]
      }
    ]
  }
}

Loader 匹配规则

1. test

使用正则表达式匹配文件：

javascript
{
  test: /\.js$/,
  use: 'babel-loader'
}

2. include

只包含特定目录：

javascript
{
  test: /\.js$/,
  include: path.resolve(__dirname, 'src'),
  use: 'babel-loader'
}

3. exclude

排除特定目录：

javascript
{
  test: /\.js$/,
  exclude: /node_modules/,
  use: 'babel-loader'
}

4. oneOf

只匹配第一个规则：

javascript
{
  test: /\.css$/,
  oneOf: [
    {
      resourceQuery: /module/,
      use: 'css-loader?modules'
    },
    {
      use: 'css-loader'
    }
  ]
}

Loader 条件

1. resource

匹配资源路径：

javascript
{
  test: /\.js$/,
  resource: {
    and: [/src/, /test/],
    not: [/node_modules/],
    or: [/\.js$/, /\.jsx$/]
  }
}

2. issuer

匹配导入者：

javascript
{
  test: /\.css$/,
  issuer: /\.js$/,
  use: 'style-loader'
}

Loader 性能优化

1. 缓存

javascript
{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true
    }
  }
}

2. 排除不必要的文件

javascript
{
  test: /\.js$/,
  exclude: /node_modules/,
  use: 'babel-loader'
}

3. 并行处理

javascript
{
  test: /\.js$/,
  use: {
    loader: 'thread-loader',
    options: {
      workers: 4
    }
  }
}

自定义 Loader

基本结构

javascript
module.exports = function(source) {
  // 处理源代码
  const result = source.replace(/foo/g, 'bar');
  
  // 返回转换后的代码
  return result;
};

同步 Loader

javascript
module.exports = function(content) {
  return content.toUpperCase();
};

异步 Loader

javascript
module.exports = function(content) {
  const callback = this.async();
  
  setTimeout(() => {
    callback(null, content.toUpperCase());
  }, 100);
};

带 options 的 Loader

javascript
module.exports = function(content, map, meta) {
  const options = this.getOptions();
  
  // 使用 options
  const result = content.replace(options.search, options.replace);
  
  return result;
};

Loader 最佳实践

合理使用 Loader：
- 只在需要时使用 Loader
- 避免过度使用 Loader
- 选择合适的 Loader
性能优化：
- 使用缓存提升性能
- 排除不必要的文件
- 合理配置 Loader 选项
代码质量：
- 编写可测试的 Loader
- 提供清晰的文档
- 处理错误情况
兼容性：
- 确保 Loader 兼容性
- 测试不同环境
- 提供降级方案

Rspack 的 Loader 系统为开发者提供了强大的文件处理能力，通过合理配置和使用 Loader，可以处理各种类型的文件，满足不同的构建需求。