umi 使用 useless-files-clean-webpack-plugin

在 UMI 4.0 中使用 useless-files-clean-webpack-plugin 可以帮助你自动清理未使用的文件。下面是如何配置和使用该插件的步骤：

1. 安装插件

首先，确保在你的 UMI 项目中安装 useless-files-clean-webpack-plugin：

npm install --save-dev useless-files-clean-webpack-plugin

2. 配置 Webpack

在你的 UMI 配置文件中（通常是 config/config.ts 或 .umirc.ts），添加 useless-files-clean-webpack-plugin 的配置。以下是一个示例：

// config/config.ts
import { defineConfig } from 'umi';
import UselessFilesCleanWebpackPlugin from 'useless-files-clean-webpack-plugin';

export default defineConfig({
  chainWebpack(config) {
    config.plugin('useless-files-clean-webpack-plugin')
      .use(UselessFilesCleanWebpackPlugin, [{
            root: join(__dirname, 'src/assets'),// 只检查静态文件，可以根据自己的情况调整
            out: './',
            clean: false,
            exclude: ['*.gitignore', 'node_modules'],
            log:'console'
      }]);
  },
});

3. 运行构建

运行以下命令来构建你的 UMI 应用：

npm run dev

4. 自动清理未使用的文件

在构建过程中，useless-files-clean-webpack-plugin 会自动识别未使用的文件并将其删除。你可以在构建完成后检查项目目录，确认未使用的文件已被清理。

注意事项

• 确保安全: 在使用自动清理功能之前，建议先备份项目，以防误删重要文件。
• 配置文件: 根据项目结构调整 patterns 配置，以确保只检查所需的文件。

总结

通过在 UMI 4.0 中配置 useless-files-clean-webpack-plugin，你可以自动清理未使用的文件，保持项目整洁。