Improve: Add progress bar to webpack build system with time estimates #2635
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add WebpackBar plugin to all webpack configurations - Display real-time build progress with time estimates - Color-coded progress bars for different build types: * Dev Build (blue) - npm run dev * Vue Dev Build (green) - npm run dev-vue * Production Build (green) - npm run prod - Enable build profiling for performance monitoring - Improve developer experience with visual build feedback
Collaborator
|
Looks Good |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR Type
What kind of change does this PR introduce?
Description
Show build progress and reports (errors and undefined results) in a single table to improve debugging.
https://imgur.com/ZO001vI
https://imgur.com/WmFs4Dn
Overview
This PR adds a visual progress bar to the webpack build system, providing real-time feedback on build progress and estimated completion time.
Features
npm run devnpm run dev-vuenpm run prodChanges
WebpackBarplugin to all webpack configurations:webpack.dev.jswebpack.dev.vue.jswebpack.prod.jspackage.jsonto includewebpackbardependencyTesting
npm run dev- Progress bar displays correctlynpm run dev-vue- Progress bar displays correctlynpm run prod- Progress bar displays correctlyScreenshot
The progress bar will display in the terminal showing:
Benefits
Dependencies
webpackbar@^7.0.0(already in devDependencies)Any linked issues
Fixes #
Checklist