博客站

在 Webpack 中，处理图片和字体文件是常见的需求。Webpack 通过 Loader 和 Plugin 来处理这些静态资源。以下是详细的配置方法和步骤：

1. 处理图片文件

Webpack 可以使用 file-loader、url-loader 或 asset modules 来处理图片文件。

方法 1：使用 file-loader

file-loader 将图片文件复制到输出目录，并返回文件的 URL。

安装

npm install file-loader --save-dev

配置

module.exports = {
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[hash:8].[ext]' // 输出路径和文件名
            }
          }
        ]
      }
    ]
  }
};

方法 2：使用 url-loader

url-loader 类似于 file-loader，但可以将小文件转换为 Base64 URL，减少 HTTP 请求。

安装

npm install url-loader --save-dev

配置

module.exports = {
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 小于 8KB 的文件转换为 Base64 URL
              name: 'images/[name].[hash:8].[ext]' // 输出路径和文件名
            }
          }
        ]
      }
    ]
  }
};

方法 3：使用 asset modules（Webpack 5 ）

Webpack 5 引入了 asset modules，无需额外 Loader 即可处理图片文件。

配置

module.exports = {
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif|svg)$/,
        type: 'asset/resource', // 处理图片文件
        generator: {
          filename: 'images/[name].[hash:8].[ext]' // 输出路径和文件名
        }
      }
    ]
  }
};

2. 处理字体文件

字体文件的处理方式与图片文件类似，可以使用 file-loader、url-loader 或 asset modules。

方法 1：使用 file-loader

配置

module.exports = {
  module: {
    rules: [
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[hash:8].[ext]' // 输出路径和文件名
            }
          }
        ]
      }
    ]
  }
};

方法 2：使用 url-loader

配置

module.exports = {
  module: {
    rules: [
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 小于 8KB 的文件转换为 Base64 URL
              name: 'fonts/[name].[hash:8].[ext]' // 输出路径和文件名
            }
          }
        ]
      }
    ]
  }
};

方法 3：使用 asset modules（Webpack 5 ）

配置

module.exports = {
  module: {
    rules: [
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset/resource', // 处理字体文件
        generator: {
          filename: 'fonts/[name].[hash:8].[ext]' // 输出路径和文件名
        }
      }
    ]
  }
};

3. 处理图片和字体的完整配置

以下是一个完整的 Webpack 配置示例，同时处理图片和字体文件：

使用 asset modules（Webpack 5 ）

module.exports = {
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif|svg)$/,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name].[hash:8].[ext]'
        }
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[hash:8].[ext]'
        }
      }
    ]
  }
};

使用 file-loader 和 url-loader

module.exports = {
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'images/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
};

4. 优化图片和字体文件

压缩图片

使用 image-webpack-loader 压缩图片文件。

安装

npm install image-webpack-loader --save-dev

配置

module.exports = {
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[hash:8].[ext]'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              optipng: {
                enabled: false
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {
                interlaced: false
              },
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  }
};

5. 总结

Webpack 处理图片和字体文件的常用方法包括：

1. 使用 file-loader：将文件复制到输出目录。
2. 使用 url-loader：将小文件转换为 Base64 URL。
3. 使用 asset modules（Webpack 5 ）：无需额外 Loader，直接处理文件。

通过合理配置，可以高效地处理图片和字体文件，并优化打包结果。