剖析 Webpack Loader （二）：处理二进制数据，开启 raw 模式

前言

在上一篇文章中，我们介绍了 Webpack Loader 的基本概念和使用方法。我们了解到，Loader 可以帮助我们预处理各种类型的资源文件，比如 JavaScript、CSS、图像等，以便它们能够被 Webpack 正确地打包和处理。

处理二进制数据

在某些情况下，我们需要处理二进制数据，比如图片、字体文件或其他类型的二进制文件。默认情况下，Webpack 会将资源文件转化为 UTF-8 字符串，然后传给 Loader。但是，当我们需要操作二进制数据时，这种方式就不太合适了。

为了解决这个问题，我们可以使用一个特殊的 Loader，叫做 raw-loader。raw-loader 的工作原理很简单：它会直接将二进制数据传给 Loader，而不会将其转换为字符串。这样，我们就可以在 Loader 中直接操作二进制数据了。

例如，我们可以使用 raw-loader 来处理图片文件。在 webpack.config.js 文件中，我们可以这样配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: 'raw-loader',
      },
    ],
  },
};

这样，当 Webpack 处理图片文件时，它就会使用 raw-loader 来直接将图片文件传给 Loader。Loader 可以直接读取图片文件的二进制数据，并对其进行处理，比如压缩、裁剪等。

同步和异步 Loader

在 Webpack 中，Loader 可以分为同步 Loader 和异步 Loader。同步 Loader 会在 Webpack 构建过程中的某个特定阶段被调用，并且会立即执行。异步 Loader 则会在 Webpack 构建过程中的某个特定阶段被调用，但它不会立即执行，而是在稍后某个时间点异步执行。

同步 Loader 的优点是执行速度快，缺点是可能会阻塞 Webpack 的构建过程。异步 Loader 的优点是可以避免阻塞 Webpack 的构建过程，缺点是执行速度可能较慢。

在大多数情况下，我们使用同步 Loader 就足够了。但是，在某些特殊情况下，我们可能需要使用异步 Loader。例如，当我们需要在 Loader 中执行一些耗时较长的操作时，就可以使用异步 Loader 来避免阻塞 Webpack 的构建过程。

总结

在本文中，我们介绍了如何使用 raw-loader 来处理二进制数据。我们还介绍了 Webpack 中同步 Loader 和异步 Loader 的区别。希望这些知识能够帮助您更好地理解和使用 Webpack Loader。