当前位置 > it书童 > webpack > 正文

webpack 打包图片

webpack it书童 2020-02-08 10:50:58 0赞 0踩 67阅读 0评论

file-loader

安装

$ npm install file-loader -D

配置文件指定相应后缀名的文件启用 file-loader

{
    test: /\.(jpg|png|gif)$/,
    use: {
        loader: 'file-loader'
    }
}

编译后生成随机字符串名称的图片

浏览器访问:

也可以自定义文件名称,如,以原来的文件名 + 哈希值作为新文件名

{
    test: /\.jpg$/,
    use: {
        loader: 'file-loader',
        options: {
            // 名称为 原名称 + 原后缀
            // 这种配置语法称为 placehodler 占位符
            // name: '[name].[ext]'
            // 原名称 + 哈希值 + 原后缀
            name: '[name]_[hash].[ext]'
        }
    }
}

源码

url-loader

除了 file-loader, 用 url-loader 也可以实现对文件进行打包

安装

$ npm install url-loader -D

然后将配置文件中将 file-loader 改成 url-loader,编译打包后发现图片并没有被打包到 dist 目录,但依然能显示,因为图片被转成了 base64 内容

这样虽然能减少图片的请求,但如果图片较大,生成的内容很多,js 文件就会很大

如果图片很小,只有几 kb, 就可以打包成 base64,因此可以新增 limit 参数,如 2048 即小于 2kb 的就用 base64 大于 2kb 就打包成文件

{
    test: /\.jpg$/,
    use: {
        loader: 'url-loader',
        options: {
            // 名称为 原名称 + 原后缀
            // 这种配置语法称为 placehodler 占位符
            name: '[name].[ext]',
            // 原名称 + 哈希值 + 原后缀
            // name: '[name]_[hash].[ext]',
            // 自定义打包生成的目录
            outputPath: 'images/',
            limit: 2048
        }
    }
}

源码

转载须注明出处:https://www.itshutong.com/articles/415/webpack-pack-picture
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录