前端优化，webpack打包删除无用文件并批量删除文件脚本

转载已于 2024-03-01 15:19:25 修改 · 460 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/weixin_45137175/article/details/129428863?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-129428863-blog-133041690.235%5Ev43%5Epc_blog_bottom_relevance_base9&depth_1-utm_sourc

文章标签：

#前端 #webpack #node.js

于 2024-03-01 15:17:11 首次发布

本文介绍了如何在Vue项目中安装并配置useless-files-webpack-plugin，该插件会在打包时生成无用文件列表。随后，作者指导如何处理这个列表，包括转换文件路径格式和创建批处理文件来删除这些无用文件，但提醒存在特殊文件名处理的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装插件 useless-files-webpack-plugin

npm i useless-files-webpack-plugin -D

在vue.config.js里面配置

 // 顶部导入插件
const UselessFile = require('useless-files-webpack-plugin')
module.exports = {
 chainWebpack: (config) => {
    config.plugin('uselessFile')
      .use(
        new UselessFile({
          root: path.resolve(__dirname, './src'), // 项目目录
          out: './fileList.json', // 输出文件列表
          clean: false, // 是否删除文件,
          exclude: /node_modules/ // 排除文件列表
        })
      )
  },
 }

打包

npm run build

打包时自动在项目的根目录下生成unused-files.json, 保存着无用文件的列表
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/12775337305f4598b340234d49015ffb.png

对unused-files.json文件进行处理

双斜杠换成单斜杠
逗号换成空
中括号去

在同级目录下创建一个delFile.bat文件

在这里插入图片描述

delFile.bat

cd /d %~dp0
chcp 65001
@echo off


echo 正在清除系统垃圾文件，请稍等。。。。。。

for /f %%i in (unused-files.json) do del %%i /f

pause

右键以管理员方式运行delFile.bat文件删除这些无用的代码

提示：对于命名中带有空格等特殊的文件无法通过这个命令删除如search_title copy.png