Webpack打包静态资源之图片篇

蔚落 2024-04-17 06:03 89阅读 0赞

### 文章目录 ###

*  占位符
 *  更改输出目录
 *  url-loader

# 占位符 #

我们知道，在打包图片的时候，名字是被`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`的占位符的定义。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]

`[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/'
                        }
                    }
                }
            ]
        }
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/e6411bbf09b04c53bb21fef504e85fb5.png