webpack管理静态页面项目

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/LLDD2014425/article/details/81288850

最近在写一个微信h5页面的项目,其中作为前端开发经常遇到的几个问题都被我遇到了
1.项目已经做好了,测试也通过了,但是UI调整以后,测试上页面没有改动,查了半天,原来是缓存;
2.每次改动都是一次版本更新,好不容易做好了,又给你说:还是改回原来的,那你怎么弄?

当然,传统的解决方案就是清除一下手机缓存,版本更换的时候做好备份就可以了。诚然,这样是可以解决问题的,但是遇到项目反复改动,版本迭代替换很频繁的项目,传统方法就显得有点儿笨手笨脚了。

于是,开始尝试使用webpack进行项目管理,在不断的尝试过后终于解决了目前的问题。

产生缓存的的解决方案是:webpack进行项目打包时,每次在更新的文件后面带上不同的参数,那这样下来,每次有更新,浏览器就会请求最新的文件,页面也就会随着一起变化。

参考链接:
【webpack基本使用方法】
https://www.cnblogs.com/bydzhangxiaowei/p/8821186.html
【webpack常用功能】
https://www.cnblogs.com/laneyfu/p/6131441.html

期间遇到几个小问题:
项目通过img srcset属性进行2x,3x图适配时,
var TransferWebpackPlugin = require(‘transfer-webpack-plugin’);//将src下的文件直接复制到dist下
参考链接:
https://www.cnblogs.com/xiaoyucoding/p/7164065.html

后续我会附上我的项目操作步骤,请关注,谢谢

猜你喜欢

转载自blog.csdn.net/LLDD2014425/article/details/81288850