index.html游戏文件,怎么以index.html文件为入口文件进行打包?

总的来说就是, 以html文件为入口, 自动寻找依赖的图片,css和js然后进行hash命名并打包。新的html文件的引用的图片css和js都会被改动成带有hash码的新的名字。

我有4个前端页面

36ff9d50e4ead78be067a7ef0c4270fb.png

里面内联了 图片 和 js(包括jquery)

15f7677333e1dd22b23796e177f4a3d6.png

和css(bootstrap)

d0034d683a65ae10c17599c2571a9010.png

我要打包成有hash加密并压缩的js和css

c4d13882217f7500bbe5ab19df1218ef.png

c788f38c1481329b85de4defbfc21766.png

同时html文件也会被压缩, 图片也被压缩并把文件名进行hash加密,

9b6b81f271e9def894ec16023a9da6cc.png

就是为了减少浏览器的请求, 所有用到的js都打包成一个js文件, 所有用到的css打包成一个css文件,文件名都进行hash加密, 然后 html文件中自动化的调用这些个hash加密的js css 和 图片。

efc23be0197412db0728dc686fe05e24.png

c81ed3e2300b5b3ffa3d430abef29d04.png

dcc305e41d8466d7ddf855ec5220b2cd.png

这样有hash加密的文件名就能进行版本控制, 方便前端静态页面的更新迭代, 只要页面上的代码改变了, 相应的代码文件名字的hash值也会不一样, 推送到服务器以后, 用户打开网页也不会因为缓存的问题而看不到最新的页面,不用ctrl+f5清除缓存。

(因为index.html文件名不进行hash加密,需要设置index.html等主页文件极低的缓存时间, 或者不缓存)

那么gulp或者webpack哪个能完成?

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值