Webpack 中如何处理图片？

推荐答案

在 Webpack 中处理图片通常需要使用 file-loader、url-loader 或 asset modules。以下是推荐的配置方式：

1. 使用 file-loader：

   // www.javascriptcn.com code example
   module.exports = {
     module: {
       rules: [
         {
           test: /\.(png|jpe?g|gif|svg)$/i,
           use: [
             {
               loader: 'file-loader',
               options: {
                 name: '[path][name].[ext]',
                 outputPath: 'images',
               },
             },
           ],
         },
       ],
     },
   };

2. 使用 url-loader：

   // www.javascriptcn.com code example
   module.exports = {
     module: {
       rules: [
         {
           test: /\.(png|jpe?g|gif|svg)$/i,
           use: [
             {
               loader: 'url-loader',
               options: {
                 limit: 8192, // 小于 8KB 的图片转为 base64
                 name: '[path][name].[ext]',
                 outputPath: 'images',
               },
             },
           ],
         },
       ],
     },
   };

3. 使用 asset modules（Webpack 5+）：

   // www.javascriptcn.com code example
   module.exports = {
     module: {
       rules: [
         {
           test: /\.(png|jpe?g|gif|svg)$/i,
           type: 'asset/resource',
           generator: {
             filename: 'images/[hash][ext][query]',
           },
         },
       ],
     },
   };

本题详细解读

1. file-loader 的作用

file-loader 会将图片文件复制到输出目录，并返回文件的路径。通过配置 outputPath，可以指定图片文件的输出路径。

2. url-loader 的作用

url-loader 类似于 file-loader，但它可以将小于指定大小的图片文件转换为 base64 编码的 Data URL，从而减少 HTTP 请求。通过 limit 选项可以设置文件大小的阈值。

3. asset modules 的作用

在 Webpack 5 中，asset modules 提供了一种更简洁的方式来处理图片等资源文件。asset/resource 类型会将文件复制到输出目录，并返回文件的路径。通过 generator 选项可以自定义输出路径和文件名。

4. 选择哪种方式？

• 如果需要将所有图片文件都复制到输出目录，使用 file-loader 或 asset/resource。
• 如果希望将小图片转换为 base64 编码以减少请求，使用 url-loader。
• 如果使用 Webpack 5，推荐使用 asset modules，因为它更简洁且功能强大。