如何自定义删除无依赖文件的webpack插件
作者:望舒时间:2026-10-31 09:53:28浏览:574
本文介绍如何开发一个自定义Webpack插件,用于自动识别并清理项目中无依赖关系的文件。通过配置入口、包含类型、排除规则及删除开关,该插件可在编译封存阶段扫描文件依赖,生成报告并支持自动删除无用文件,帮助优化项目体积。
插件原理
通过自定义Webpack插件,利用执行完成编译的封存阶段后,产生的产物module.fileDependencies,生成依赖的文件组。通过读文件的方式,将待扫描的文件组和有依赖关系的文件进行对比。最终暴露出项目中,不存在依赖关系的文件,并可配置将其全部删除。
代码实现
1、自定义webpack插件,配置options。遍历stats.compilation.fileDependencies,存储依赖文件。
const fs = require('fs');
const path = require('path');
class UnDependencClearPlugin {
constructor(options = {}) {
this.options = options;
this.entry = options.entry || 'src'; // 入口
this.include = options.include || ''; // 包含哪些文件'.vue|.js'
this.exclude = options.exclude || ''; // 排除哪些文件夹 ['src/assets', 'src/views']
this.isDelete = options.isDelete || false; // 是否主动删除文件
this.originFile = []; // node读取的源文件目录 处理过include及exclude 后的数据 最全的数据
this.dependenciesFile = []; // webpack依赖数据 处理过include及exclude 后的数据 依赖数据
this.noUseFile = []; // 可删除的数据
this.init(); // 初始化
}
apply(compiler) {
compiler.hooks.done.tapAsync('UnDependencClearPlugin', (stats, cb) => {
// 获取依赖
let curFile = [];
stats.compilation.fileDependencies.forEach((item) => {
curFile.push(item);
});
// 排除node_modules和entry
curFile = curFile.filter((item) => {
if (
item.indexOf('node_modules') == -1 &&
item.indexOf(this.resolve(this.entry)) > -1
) {
return item;
}
});
// 处理include
const includeFile = this.includeHandle(curFile);
// 处理exclude
const excludeFile = this.excludeHandle(includeFile);
this.dependenciesFile = excludeFile;
// 从 originFile 及 dependenciesFile分析出未被使用的数据
this.originFile.forEach((item) => {
if (this.dependenciesFile.findIndex((el) => el == item) == -1) {
this.noUseFile.push(item);
}
});
// 处理资源 写入文件
this.writeDirPathHandle();
cb();
});
}
// 初始化
init() {
}
// 处理规则
includeHandle(list) {
return filterFile;
}
// 处理规则
excludeHandle(list) {
return filterFile;
}
// 写入文件
writeDirPathHandle() {
}
// 删除文件
deleteFileHandle() {
}
}
module.exports = UnDependencClearPlugin;2、通过配置的include文件类型,使用includeHandle方法进行文件类型筛选,
// 处理规则
includeHandle(list) {
if (!this.include) {
return list;
}
// 指定类型的文件
const includeArr = this.include.split('|');
const filterFile = list.filter((item) => {
const index = includeArr.findIndex((el) => item.indexOf(el) > -1);
if (index > -1) {
return item;
}
});
return filterFile;
}3、配置过滤规则
// 处理规则
excludeHandle(list) {
if (!this.exclude) {
return list;
}
// 过滤指定文件夹
const excludeList = [];
this.exclude.forEach((item) => {
excludeList.push(this.resolve(item));
});
const filterFile = list.filter((item) => {
const index = excludeList.findIndex((el) => item.indexOf(el) > -1);
if (index == -1) {
return item;
}
});
return filterFile;
}4、将产物写入文件,用户可清晰看见被扫描的所有文件、存在依赖的文件、无用文件
// 写入文件
writeDirPathHandle() {
let content = `所有文件-length[${this.originFile.length}]、依赖文件-length[${this.dependenciesFile.length}]、无用文件-length[${this.noUseFile.length}]`;
content += `\r\n###所有文件-length[${
this.originFile.length
}]###\r\n${this.originFile.join('\n')}\r\n`;
content += `\r\n###依赖文件-length[${
this.dependenciesFile.length
}]###\r\n${this.dependenciesFile.join('\n')}\r\n`;
content += `\r\n###无用文件-length[${
this.noUseFile.length
}]####\r\n${this.noUseFile.join('\n')}\r\n`;
fs.writeFile('dependency.txt', content, (err) => {
if (err) {
console.error(err);
return;
}
// 判断是否执行删除
if (this.isDelete) {
this.deleteFileHandle();
}
});
}5、使用时,配置开关isDelete,开启后可自动删除无用文件
// 删除文件
deleteFileHandle() {
this.noUseFile.forEach((item) => {
fs.unlink(item, (err) => {
if (err) throw err;
});
});
}使用方法
1、在项目中添加undependencClearPlugin.js文件
2、在webpack.config.js文件中配置plugin
const undependencClearPlugin = require('./undependencClearPlugin');
isEnvDevelopment &&
new undependencClearPlugin({
entry: '/src',
include: '.js|.vue|.jpg',
exclude: ['./node_modules'],
isDelete: false,
}),3、对于想主动清理代码这个场景,只需在菜单中删除或注释菜单的引用文件
//路由
component: () => import('@/xxx/xxx/xxx.vue')
//或者
require(['./xxx/xxx.vue'], resolve)
// 或者引入的文件
import xxx from './xxx/xxx/xxx'到此这篇关于自定义删除无依赖文件的webpack插件的文章就介绍到这了,更多相关自定义删除webpack插件内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
作者最新文章
Docker 部署 Wiki.js 完整教程:从安装到初始化配置
2026-11-04 10:36:31
从其他平台迁移数据到 Wiki.js 的方法与注意事项
2026-11-03 23:50:05
Wiki.js 启动报错或数据库连接失败怎么排查解决
2026-11-03 09:49:52
macOS 使用 Homebrew 或 nvm 升级 Node.js 的最佳实践
2026-11-03 08:29:29
前端项目部署后如何提示用户版本更新详解
2026-11-01 02:17:48
