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

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

我有4个前端页面

3d6fd6cf83bc06e8e72d9d95f6405415.png

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

c1037d7ef16786122b6b09d0db9e54c5.png

和css(bootstrap)

aeaa427780643fa504a0dd1f41adc1d3.png

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

37a713d0c4b9156bfdaac8952032d7c9.png

769bbfb55e82d527dc74912d0f22d43e.png

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

30aeb885fb992eb303724f697b9064b2.png

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

fc009e1a318b73077eeb289a7e93de44.png

190c778d951bea5a33ed29dfdc2dee1d.png

1cb4da4aa7b37a40fed1e30689942909.png

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值