Print webpack console to browser console #1063
Conversation
status window now stays for a moment after recompilation before reloading the app
The second webpack color (the light blue) doesn't look that great as background for the status window, I added it just for reference.
This time for good
Wernerson
changed the title
|
There were some merge issues. Will check them this weekend and make the branch ready to merge 👍 |
|
I'd also remove the clearing of the console. Best to leave that up to the users to do manually. |
Codecov Report
@@ Coverage Diff @@
## master #1063 +/- ##
=======================================
- Coverage 73.17% 72.17% -1%
=======================================
Files 5 5
Lines 451 460 +9
Branches 143 147 +4
=======================================
+ Hits 330 332 +2
- Misses 121 128 +7
Continue to review full report at Codecov.
|
|
Done and ready to merge 👍 |
|
@Wernerson please update the PR description to remove the bit about clearing the console and we'll get this merged. |
lib/Server.js
Outdated
| @@ -52,8 +53,15 @@ function Server(compiler, options) { | |||
| const invalidPlugin = () => { | |||
| this.sockWrite(this.sockets, 'invalid'); | |||
| }; | |||
| const progressPlugin = new webpack.ProgressPlugin((percent, msg, addInfo) => { | |||
There was a problem hiding this comment.
should probably only load this plugin if options.progress is true as well
|
@shellscape Condition added and description edited. Codecov fails though... |
|
I'm going to bypass the code coverage this time. The refactor for v3 should help boost those numbers, and the config for that needs to ignore client files until we figure out a good way to test the client. Thanks for getting this in. |
| if (this.progress) { | ||
| const progressPlugin = new webpack.ProgressPlugin((percent, msg, addInfo) => { | ||
| percent = Math.floor(percent * 100); | ||
| if (percent === 100) msg = 'Compilation competed'; |
There was a problem hiding this comment.
Compilation competed -> Compilation completed
There was a problem hiding this comment.
I'll clean up that typo in a bit
| "type": "boolean" | ||
| } | ||
| ] | ||
| }, |
There was a problem hiding this comment.
"progress": {
"description": "Shows compilation progress in browser console.",
"type": "boolean"
},| } | ||
| }, | ||
| 'progress-update': function progressUpdate(data) { | ||
| if (useProgress) log.info(`[WDS] ${data.percent}% - ${data.msg}.`); |
There was a problem hiding this comment.
given that it's an opt-in and the browser console doesn't have control characters, I don't believe it is.
|
I was looking forward to this feature but it doesn't seem to be working, what all is needed to enable it? I set |
|
@pelotom I just checked the example app for progress and it appears to be working for me. |
|
@pelotom Whats your loglevel set to? Has to be on info at least. |
|
I'd like to use this feature but on fast builds it is super chatty, and so I disabled it and will probably forget about it when the build starts slowing down :) How about throttle the console messages if they come in rapidly?
Or maybe a simple way to hook into this as a user and apply my own filtering? |
|
@g0t4 Good idea, I'll take a look into it. |
What kind of change does this PR introduce?
feature
Did you add or update the
examples/?yes
Summary
As discussed in issue #1032, the webpack console now gets displayed in the browser console if the progress option is set to true.
Does this PR introduce a breaking change?
It shouldn't ;)
Other information
None