url-loader

原创 在下乃坑爹君 随笔 WebPack 200阅读 2017-07-01 14:00:06 举报

原文地址:https://webpack.js.org/loaders/url-loader/
webpack版本:2.2.1

将图片文件转换为base64编码并载入浏览器能够减少http请求数,但是增大了js或html文件的体积,如果图片在项目中的重用度较高,那么每处引用都会生成base64编码,造成了代码的冗余。通过http请求载入到浏览器的文件可以缓存到本地,当图片在项目中的重用度较高时,会为图片的访问增加缓存的便利性,下次访问更快。因此要平衡考虑。

安装

其中 file-loader url-loader两个模块是图片处理的必要模块

#####npm install url-loader --save-dev
#####npm install flie-loader --save-dev

当然有的人说url-loader就可以了啊,为什么要file-loader??
原因:一般限制小图片转 base64 可以用 url-loader,其他情况都用 file-loader。比如下面的一段 limit=1000,这里的1000单位其实就是byte单位,也就是传说中的字节单位,10K等于10240byte,这也是为什么说需要file-loader的原因!!!
不然的话中端webpack就会报错!

html 代码

url-loader

然后终端webpack

url-loader

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复