Webpack 本身不带图形化进度条，但可通过内置 ProgressPlugin 或第三方工具如 webpack-bundle-analyzer 实现构建进度可视化与产物分析；ProgressPlugin 支持自定义文字提示与 chalk 美化，而 BundleAnalyzerPlugin 在构建后生成体积报告。
Webpack 本身不带图形化进度条，但可以通过内置插件或第三方工具实时展示 TypeScript 项目的构建进度，让打包过程更透明、不焦虑。
使用 Webpack 内置 ProgressPlugin
这是最轻量、无需额外安装的方式，适合快速启用进度反馈：
- 在 webpack.config.js 中引入并配置：
const { ProgressPlugin } = require('webpack'); - 添加到 plugins 数组中：
new ProgressPlugin({
handler: (percentage, msg) => {
process.stdout.clearLine();
process.stdout.cursorTo(0);
process.stdout.write(`? ${Math.round(percentage * 100)}% — ${msg}`);
}
}) - 支持简单文字提示（如“building modules”“sealing”），但默认无颜色和动画
用 chalk 美化终端输出
让进度文字更醒目，提升可读性：
typescript-dev
下载
使用 Vite 8、React 19、Tailwind CSS v4、shadcn/ui、Biome、Vitest 和 Hono 构建全栈 TypeScript 应用，涵盖前端（Vite/Rolldown 构建 + 开发）...
- 安装：
npm install -D chalk - 在 handler 中调用：
const chalk = require('chalk');
process.stdout.write(chalk.green(`✅ ${Math.round(percentage * 100)}%`) + ` — ${chalk.yellow(msg)}`); - 可搭配 chalk.bold、chalk.bgBlue 等实现高亮/背景色，避免纯白文字淹没在终端日志中
进阶：用 webpack-bundle-analyzer 查看产物构成
虽然不是“进度条”，但在构建完成后立刻分析体积分布，属于构建状态的延伸反馈：
- 安装：
npm install -D webpack-bundle-analyzer - 配合 mode: 'production' 使用，在 plugins 中添加：
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
new BundleAnalyzerPlugin({ openAnalyzer: false }) - 构建后会自动生成 report.html，直观看到每个模块大小和依赖关系
注意点：TypeScript 场景下的兼容细节
进度插件本身与语言无关，但需确保它运行在完整构建流程中：
- ProgressPlugin 必须放在 plugins 数组里，且位置不影响其触发时机
- 若同时用了 fork-ts-checker-webpack-plugin（做类型检查分离），它的耗时不会被 ProgressPlugin 统计——建议开启 async: false 或单独监听其状态
- 使用 ts-loader 时，loader 阶段的编译时间会被计入进度，但具体百分比是估算值，不代表精确剩余时间
