Webpack打包静态资源之图片篇

最新推荐文章于 2025-01-24 22:02:28 发布

Meskjei

最新推荐文章于 2025-01-24 22:02:28 发布

阅读量1.3k

点赞数

分类专栏： Webpack 前端文章标签： Webpack 静态资源

本文链接：https://blog.youkuaiyun.com/hjc256/article/details/100069938

版权

前端同时被 2 个专栏收录

70 篇文章

订阅专栏

Webpack

18 篇文章

订阅专栏

本文介绍了如何在Webpack中处理静态资源，特别是图片资源。通过配置`output`字段的`publicPath`来更改图片输出目录，使用`url-loader`配合`limit`参数，确保小图片以base64形式内联，而大图片保持原样，优化项目加载效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

占位符

我们知道，在打包图片的时候，名字是被file-loader重新命名过的。那如果我想使用图片本身的名字该怎么办呢？同样的，可以在webpack.config.js里配置。

const path = require('path');

module.exports ={
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(webp|jpg|png)$/,
                use:{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]'
                    }
            }
        }]
    }
};

在use字段内可以再定义一个options字段，这个字段对应的对象内有个name属性，值为[name].[ext]。

[name]、[ext]就是占位符，我们可以到Webpack官网看到fileloader的占位符的定义。

在这里插入图片描述

[name].[ext]的意思就是使用图片本身的文件名和拓展名。

更改输出目录

现在的配置，打包后的图片是默认放在配置文件中指定的输出目录之中的。那如果我想放到输出目录下的images文件中该怎么配置？

答案就是在options内新增一个outputPath的字段，将值设置为images/。

const path = require('path');

module.exports ={
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(webp|jpg|png)$/,
                use:{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'images/'
                    }
                }
        }]
    }
};

url-loader

url-loader与之前使用的file-loader非常相像，它在options内没有设置limit之前是直接将图片变为base64的形式的。

那么这样做有利也有弊，对于较小的图片，直接将其变为base64的形式写在JS文件之中有利于减少http请求，但是对于较大的图片，就会导致JS文件加载时间过长，页面长时间空白。

于是我们能想到一个最佳的实践就是小图片转换成base64写在JS文件中，而大文件依旧是跟之前使用file-loader时一样。

我们只需为options添加limit就可以做到这一点。limit的值是一个数字，代表了多少比特。当图片大小小于这个值时就会转换成base64。

const path = require('path');

module.exports ={
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(webp|jpg|png)$/,
                use:{
                    loader: 'url-loader',
                    options: {
                        limit: 2048,
                        name: '[name].[ext]',
                        outputPath: 'images/'
                    }
                }
            }
        ]
    }
};