如何进行清理服务器上webpack打包的过期hash文件

如何进行清理服务器上webpack打包的过期hash文件？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联公司致力于互联网品牌建设与网络营销，包括成都做网站、网站制作、SEO优化、网络推广、整站优化营销策划推广、电子商务、移动互联网营销等。创新互联公司为不同类型的客户提供良好的互联网应用定制及解决方案，创新互联公司核心团队10余年专注互联网开发，积累了丰富的网站经验，为广大企业客户提供一站式企业网站建设服务，在网站建设行业内树立了良好口碑。

现在前端的项目基本上都会用 webpack 打包代码，并且文件名（html 文件除外）都是 hash 化的，这样可以去除浏览器的缓存。但是会产生另外一个问题，就是服务器上会堆积大量过期（不会被用到）的 hash 文件，这些文件又主要是 js 和 css 文件，因为基本上每构建一次都会产生新的 js 和 css 文件。如果这些文件不清除的话，会大量占用服务器存储空间。

1. 思路

1、从 html 文件中读取 css 文件的 hash 值集合；

2、然后根据这些 hash 值集合，把 hash 不在这个集合内的 css 文件删掉；

3、从 html 文件中读取 js 文件的 hash 值集合；

4、然后根据这些 hash 值集合，把不属于动态加载的，并且 hash 不在这个集合内的 js 文件删掉；（动态加载 js 参考 dynamic-imports）

5、从不属于动态加载的 js 文件中读取动态加载的js 文件的 hash 值集合；

6、然后根据这些 hash 值集合，把动态加载的，并且 hash 不在这个集合内的 js 文件删掉；

7、从剩下的 html,css,js 文件中读取图片、字体等其他静态资源文件的 hash 值集合；

8、然后根据这些 hash 值集合，把 hash 不在这个集合内的静态资源文件删掉。

2. sclean

基于上面这个思路，我封装了一个 npm 包：sclean.

主要有以下几个功能：

1、备份服务器文件，因为删除是非常危险的一个操作，所以在每次清除过期文件之前都会备份一次，当然也可以手动备份；

2、恢复服务器文件到之前备份的某个状态（用于清除出错之后的恢复操作）；

3、根据配置进行清除操作，比如自定义目标目录（dist, build），html文件（php, jsp），hash 长度（32, 8）等。

安装

npm install sclean -g

执行清除操作

sclean

看完上述内容，你们掌握如何进行清理服务器上webpack打包的过期hash文件的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！