复习webpack4之图片打包

之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。

这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好地应对以后的工作。

1.图片打包

熟悉webpack配置的前端都知道,loader是webpack用来处理非js文件的,现在我们要在js文件中引入一张图片。

直接引入是肯定不行的,需要在webpack.config.js中配置 file-loader,别忘了要 npm install file-loader -D

然后运行webpack进行打包。

file-loader会自动打包处理jpg文件,并且放到输出的目录中。

注:console.log的结果就是打包后图片的名称。

2.打包图片名称

如果我们想要让打包出来的图片名称和引入名称相同,要怎么做呢?

这时候我们就需要去loader中添加一些额外的配置了。


options中,[name]代表源文件名称,[ext]代表源文件后缀,这样打包出来的文件就和原来的文件名称相同了。


这种配置的语法叫做placeholder,也叫占位符。占位符的种类还有很多,比如[hash]等,具体可以去看webpack的官网( webpack.js.org/loaders/fil…)。

我们可以再给图片加一个hash值。


运行webpack打包后的结果


当然,file-loader不只可以打包jpg文件,还可以打包png等文件。


3.图片打包目录

我们可以在output中配置文件打包的目录,也可以在loader的options中单独配置图片的打包目录


运行webpack打包后的结果


这时候图片已经被打包到images文件夹中。

4.url-loader

提到 file-loader 就会想到 url-loaderurl-loader可以实现 file-loader 的功能,那他们有什么区别呢?


区别在于 url-loader 会把图片转为base64,而不是单独打包出一张图片。

好处是图片打包在js文件中,页面不需要额外发送一次http请求,而缺点是如果图片很大的话,js文件就会很大,会导致js加载变慢,页面出现空白的情况。所以当图片比较小的时候适合用 url-loader

5.url-loader最佳实践


意思是如果图片超过204800个字节(200kb),就使用和 file-loader相同的方式进行打包。
如果图片小于204800个字节(200kb),就使用base64方式进行打包。

转载于:https://juejin.im/post/5cae00d6e51d456e6a1d020a

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值