深入浅出 webpack 4.0——Assets 篇

2023-10-21 05:20:20

前言

在构建现代 Web 应用程序时，您不可避免地会遇到各种类型的静态资源，如图像、视频、字体等。这些资源通常需要被加载到您的应用程序中，以便它们能够被正确地显示和使用。webpack 是一个非常流行的构建工具，它可以帮助您轻松地管理和处理这些静态资源。

在本文中，我们将详细介绍 webpack 如何处理 Assets 资源，包括静态文件（如图像、视频和字体）的处理方式以及各种可用的加载器，如 file-loader、url-loader 和 css-loader 等。我们将深入剖析这些加载器的配置和功能，帮助您更好地理解和使用它们来优化您的 webpack 构建。

webpack 处理 Assets 资源

webpack 通过 file-loader 处理资源文件，它会将 rules 规则命中的资源文件按照配置的信息（路径，名称等）输出到指定目录，并返回其资源定位地址（输出路径，用于生产环境的 publicPath 路径）。

file-loader 的基本配置如下：

{
  test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      outputPath: 'images/',
      publicPath: 'images/'
    }
  }
}

test 属性指定了要匹配的文件类型，在本例中，我们匹配了常见的图像和字体文件。
use 属性指定了要使用的加载器，在本例中，我们使用了 file-loader。
options 属性指定了加载器的配置选项，包括输出文件名（name）、输出路径（outputPath）和 publicPath 路径（publicPath）。

当 webpack 处理一个匹配规则的文件时，它会将该文件复制到指定的输出目录，并返回其资源定位地址。这个资源定位地址可以是绝对路径，也可以是相对路径，具体取决于您在 publicPath 中的配置。

例如，如果我们有一个名为 image.png 的图像文件，并且我们在 webpack 配置中使用了如上的配置，那么当 webpack 处理这个文件时，它会将其复制到 images/ 目录下，并返回其资源定位地址为 images/image.png。

优化 Assets 处理

使用 url-loader

url-loader 是另一个常用的加载器，它可以将资源文件内联到您的应用程序中。这意味着这些资源文件不会被单独输出到文件中，而是会被直接嵌入到您的 JavaScript 代码中。

url-loader 的基本配置如下：

{
  test: /\.(png|jpe?g|gif|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 10240,
      name: '[name].[ext]'
    }
  }
}

test 属性指定了要匹配的文件类型，在本例中，我们匹配了常见的图像文件。
use 属性指定了要使用的加载器，在本例中，我们使用了 url-loader。
options 属性指定了加载器的配置选项，包括大小限制（limit）和输出文件名（name）。

当 webpack 处理一个匹配规则的文件时，它会检查该文件的大小是否小于 limit 属性指定的大小。如果文件大小小于限制，那么它会将该文件内联到您的应用程序中，否则，它会使用 file-loader 将该文件复制到指定的输出目录。

使用 css-loader

css-loader 是一个用于处理 CSS 文件的加载器，它可以将 CSS 文件中的资源文件内联到您的应用程序中。

css-loader 的基本配置如下：

{
  test: /\.css$/,
  use: {
    loader: 'css-loader',
    options: {
      url: true
    }
  }
}

test 属性指定了要匹配的文件类型，在本例中，我们匹配了 CSS 文件。
use 属性指定了要使用的加载器，在本例中，我们使用了 css-loader。
options 属性指定了加载器的配置选项，包括是否内联资源文件（url）。

当 webpack 处理一个匹配规则的 CSS 文件时，它会将该文件中的资源文件内联到您的应用程序中。这意味着这些资源文件不会被单独输出到文件中，而是会被直接嵌入到您的 CSS 代码中。

使用 cacheDirectory 和 deterministic

cacheDirectory 和 deterministic 是两个可以提高 webpack 构建速度的选项。

cacheDirectory 选项指定了 webpack 是否应该将构建缓存到磁盘上。如果启用此选项，那么 webpack 将在下次构建时重用缓存，从而可以大大缩短构建时间。
deterministic 选项指定了 webpack 是否应该生成一致的输出。如果启用此选项，那么 webpack 将始终生成相同的输出，无论您使用的是哪台计算机或哪个操作系统。

总结

在本文中，我们详细介绍了 webpack 如何处理 Assets 资源，包括静态文件（如图像、视频和字体）的处理方式以及各种可用的加载器，如 file-loader、url-loader 和 css-loader 等。我们深入剖析了这些加载器的配置和功能，帮助您更好地理解和使用它们来优化您的 webpack 构建。