首页 > Web开发 > 详细

webpack 打包优化 file-loader 和 url-loader

时间:2021-06-16 11:47:51      阅读:16      评论:0      收藏:0      [点我收藏+]

通过 file-loader 和 url-loader 来打包图片字体文件

module: {
    rules: [{
        test: /.css$/,   //配置对应文件
        use: [
        ‘style-loader‘,  
        ‘css-loader‘   //先执行后面的   先生成
        ] //调用对应打包工具
    }, {
        test: /.png$/,   //配置对应文件 
        use: {
            loader: ‘url-loader‘, //小文件 用 url-loader   大文件 file-loader
            options: {  //会根据文件大小判断 符合要求使用url-loader 不符合用 file-loade  r
                limit: 10 * 1024 //字节  实际 10kb
            }
        }
    }]
}

 

url-loader 实际转换成 dateUrl 
 data:image/png;base64,iVBORw0KGgo........AElEQVR4nO3d7VE   
使用dataUrl会减少请求次数, 单数如果大文件的话 base64会占用太大文件空间

webpack 打包优化 file-loader 和 url-loader

原文:https://www.cnblogs.com/faint33/p/14888420.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!