从零撸一个 px2rem-loader，拓展丰富功能！

前言

在面试中，你是否经常被问到如何编写一个 webpack loader 或 plugin？如果是这样，你可能会感到有点不知所措。别担心，在这篇文章中，我们将深入了解如何实现一个 loader，并亲自动手编写一个阉割版的 px2rem loader。

编写一个 Webpack Loader

Webpack loader 是模块，它允许你对 Webpack 处理的资源进行转换。例如，你可以使用 loader 将 Sass 转换为 CSS，或者将 TypeScript 转换为 JavaScript。

要编写一个 loader，你需要创建一个 JavaScript 文件并导出一个函数。该函数将接收三个参数：

• source：要转换的源代码
• sourceMap：可选的 source map
• context：Webpack 上下文对象

你的函数应该返回转换后的源代码和一个 source map（如果需要）。

一个阉割版的 px2rem Loader

让我们创建一个阉割版的 px2rem loader，它将 px 单位转换为 rem 单位。我们不会实现所有功能，但我们会专注于理解 loader 的基本工作原理。

首先，创建一个名为 px2rem-loader.js 的文件并添加以下代码：

module.exports = function (source) {
  // 你的转换逻辑在这里
  return source;
};

现在，让我们添加一些转换逻辑。我们将使用正则表达式将 px 单位替换为 rem 单位：

module.exports = function (source) {
  const regex = /px/g;
  const convertedSource = source.replace(regex, 'rem');
  return convertedSource;
};

最后，我们需要在 Webpack 配置文件中注册我们的 loader。在你的 webpack 配置文件中，找到 module.rules 数组并添加以下内容：

{
  test: /\.css$/,
  use: ['px2rem-loader'],
}

现在，你的 webpack 配置将使用你的 px2rem loader 来转换所有 CSS 文件。

拓展功能

除了基本的转换功能外，我们还可以通过添加一些额外的功能来拓展我们的 px2rem loader：

• 支持多个设计稿尺寸： 允许你指定多个设计稿尺寸，loader 将根据当前屏幕尺寸自动选择正确的 rem 单位。
• 排除某些选择器： 让你可以排除某些选择器，以防止它们被转换为 rem 单位。
• 自定义单位转换： 允许你自定义 px 到 rem 的转换比例。

总结

在这篇文章中，我们了解了如何从零开始编写一个 webpack loader。我们创建了一个阉割版的 px2rem loader，并讨论了如何拓展它的功能。通过使用 webpack loader，你可以扩展 webpack 的功能，并创建适合你特定需求的自定义构建工具。