面试题：Webpack中如何配置以正确打包图片资源并处理不同格式图片的兼容性？

Question

在Webpack项目中，你需要实现图片资源的打包。已知项目中有jpg、png、svg等格式图片，要求使用合适的loader，使这些图片能正确打包，并且在不同浏览器中兼容性良好。请描述具体的Webpack配置步骤及相关loader的使用方法。

Answer 1

1. 安装相关loader：
   • file - loader：用于处理文件资源，包括图片，它会将文件输出到指定目录，并返回一个公共URL。
   • url - loader：它基于file - loader，可以将小文件转换为Data URL嵌入到代码中，减少HTTP请求。对于图片，可用于处理小尺寸图片。
   • @svgr/webpack：专门用于处理SVG文件，能将SVG文件转为React组件等，同时保持良好的兼容性。

   npm install file - loader url - loader @svgr/webpack --save - dev
   

2. Webpack配置： 在webpack.config.js文件中添加如下配置：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(jpg|png)$/,
                use: [
                    {
                        loader: 'url - loader',
                        options: {
                            limit: 8192, // 将小于8KB的图片转为Data URL
                            name: 'images/[name].[ext]' // 输出到images目录，保持原文件名和扩展名
                        }
                    }
                ]
            },
            {
                test: /\.svg$/,
                use: [
                    {
                        loader: '@svgr/webpack',
                        options: {
                            // 可根据需求配置相关选项，如处理React组件相关配置等
                        }
                    },
                    {
                        loader: 'file - loader',
                        options: {
                            name: 'images/[name].[ext]' // 输出到images目录，保持原文件名和扩展名
                        }
                    }
                ]
            }
        ]
    }
};

上述配置中：

• 对于jpg和png图片，url - loader会将小于8KB的图片转换为Data URL嵌入代码，大于8KB的图片会使用file - loader输出到images目录，并生成对应的URL引用。
• 对于svg图片，先使用@svgr/webpack进行处理，再使用file - loader输出到images目录并生成引用URL，这样能在不同浏览器中保证兼容性。