深入 Webpack5 等构建工具系列三(2) - file-loader 文件名和文件路径设置

codersjj
563 阅读3分钟

这是我参与8月更文挑战的第26天，活动详情查看：8月更文挑战

上一篇文章我们讲了 file-loader 的使用，我们配置了相关规则，使得当遇到 png 或 jpeg 或 jpg 或 gif 或 svg 图片时，将它们交给 file-loader 处理。

下面，如果我们想要修改 file-loader 默认给我们生成的图片的名字，该怎么做呢？

首先，我们要知道，file-loader 在处理图片文件时，会根据文件内容通过 md4 摘要算法来生成 128 位（bit）长度（然后每 4 位就用 16 进制表示为 1 位，最后显示的就是 32 位长度）的哈希值，作为打包后的图片名称。显然，这样做有一个弊端，就是无法知道打包后的图片和打包前的图片的对应关系。但我们希望能够清楚地知道打包前后图片的对应关系，把图片原来的名字也加到打包后的图片名字中去，即我们希望能对图片进行重命名。

1. 文件名称的规则

  • 有时候我们处理后的文件名称需要按照一定的规则进行显示：

    • 比如保留原来的文件名、扩展名，同时为了防止重复，包含一个 hash 值等；

  • 这个时候我们可以使用 placeholders 来完成，webpack 给我们提供了大量的 placeholders 来显示不同的内容：

  • 这里介绍几个最常用的 placeholder：

    • [ext] ： 处理文件的扩展名；
    • [name] ：处理文件的名称；
    • [hash] ：文件的内容，使用 MD4 的散列函数（哈希函数/摘要函数）处理，生成的一个 128 位的 hash 值（ 32 个十六进制）；
    • [contenthash] ：在 file-loader 中和 [hash] 结果是一致的（在 webpack 的一些其它地方不一样，后面会讲到）；
    • [hash:<length>] ：截取 hash 的长度，默认 32 个字符太长了；
    • [path] ：文件相对于 webpack 配置文件的路径；

2. 设置文件名称

下面，我们就对 file-loader 要处理的文件最后打包出来的文件的名字进行自定义配置，来到 webpack 的配置文件中，对处理图片的 Rule 的 use 属性内容进行修改：

image-20210215164720799.png

{
  test: /.(png|jpe?g|gif|svg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[hash:6].[ext]'
      }
    }
  ]
}

然后在当前项目目录下运行 npm run build 命令进行编译打包（建议先把输出目录 build 目录下之前生成的两张图片删除后再运行命令），成功打包后再来看输出目录下的内容：

image-20210215165138813.png

可以看到，打包后的图片成功地按照我们指定的格式（原文件名称.6 位 hash 值.原文件扩展名）重命名了。

3. 设置文件的存放路径

除了文件的名称设置，还有一个问题，就是当有很多文件时，如果所有文件最后都打包到输出目录下，看上去就会有很多文件也很乱。因此，如果有多张图片，我们希望将它们都放到一个文件夹中去（比如名为 img 的文件夹）。这时，我们就可以通过 outputPath 属性来指定目标文件要放置的文件系统路径：

image-20210215170710011.png

{
  test: /.(png|jpe?g|gif|svg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[hash:6].[ext]',
        outputPath: 'img'
      }
    }
  ]
}

删除 build 目录后重新运行 npm run build 命令打包，重新生成的 build 目录如下：

image-20210215170849719.png

可以看到，两张图片都已经放在了 img 文件夹下。

事实上，还有另外一种更常用的方式来指定目标文件要放置的文件系统路径，即直接在 options.name 中的最前面加上要放置的路径：

image-20210215171121267.png

{
  test: /.(png|jpe?g|gif|svg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: 'img/[name].[hash:6].[ext]',
        // outputPath: 'img'
      }
    }
  ]
}

重新运行 npm run build 命令打包，也能成功将两张图片放置在输出目录下的 img 文件夹下。

以上，就是对 file-loader 输出的文件进行重命名并且将文件输出到指定文件夹下的操作说明。

avatar
文章
阅读
粉丝