Webpack：使用Loader打包图片

最新推荐文章于 2024-07-21 15:11:42 发布

oiaa

最新推荐文章于 2024-07-21 15:11:42 发布

阅读量1.6k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_41900808/article/details/88662276

版权

本文介绍了如何在Webpack中利用file-loader和url-loader打包图片。file-loader用于处理图片，而url-loader提供相同功能且能将小图片转化为base64字符串，减少HTTP请求。最佳实践是用url-loader打包1KB到2KB的图片，以达到优化加载速度的效果。

摘要由CSDN通过智能技术生成

file-loader

webpack.config.js

const path = require('path'); //引入node核心模块

module.exports = {
    mode: 'development',//打包模式(默认)
    entry: {
        main: './src/index.js',//从那一个文件开始打包
    },
    module: { //当遇到不知道怎么打包的模块时,到此位置查找
        rules: [{
            test: /\.(jpg|png|gif)$/, //打包的文件以jpg,png,gif结尾
            use: {
                loader: 'file-loader',
                options: { //file-loader配置项
                    //placeholder 占位符
                    name: '[name]_[hash].[ext]',//保持打包后的图片名字和原来一样
                    outputPath: 'images/'
                    //打包后的图片输出到images文件夹中
                }
            }
        }]
    },
    output: { //打包好的文件,放置信息如下
        path: path.resolve(__dirname, 'dist'),
        //dirname 表示当前路径,dist 是文件夹
        filename: 'bundle.js'
    }
}