面试题：Webpack中图片资源打包的常用loader有哪些及配置方式

Question

在Webpack打包前端项目时，对于图片资源，常用的loader有哪些？请分别描述它们的作用，并给出简单的Webpack配置示例。

Answer 1

在Webpack打包前端项目时，处理图片资源常用的loader有以下两种：

file-loader

• 作用：将文件发送到输出目录，并返回文件的公共URL路径。它会把图片文件原封不动地拷贝到指定输出目录，并在引用处生成一个对应图片的URL路径，适用于各种类型文件，包括图片。
• Webpack配置示例：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'images/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    }
};

上述配置中，test指定匹配图片文件类型，name指定输出的图片文件路径及命名规则，这里会把图片输出到images目录下，文件名保持不变。

url-loader

• 作用：功能类似file-loader，但当图片较小时，可以将图片转换为Base64编码的字符串，直接嵌入到代码中，减少HTTP请求数量。
• Webpack配置示例：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192, // 8kb，小于此大小的图片转为base64
                            name: 'images/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    }
};

这里limit参数指定了图片转换为Base64编码的大小限制，小于8kb的图片会被转换为Base64字符串，大于此限制的图片会按照file-loader的方式处理，name同样指定了输出路径和命名规则。