Print webpack progress to browser console (#1063)

* copied status.js from overlay.js * first version * added example * added checkif status is set * changed description * fixed config schema * fixed validation testcase * added status to title * changed status div style * added status window delay status window now stays for a moment after recompilation before reloading the app * made status work better with overlay * added status bar * added status update * added progress updates on backend * changed progress bar color to webpack logo color * added second webpack logo color as comment The second webpack color (the light blue) doesn't look that great as background for the status window, I added it just for reference. * added compilation status to title * ran prepublish, posttest and beautify * fixed codacy issues * fixed codacy issues This time for good * fixed merge error * console-progress v1 * fixed lint errrors (LF -> CRLF) * load plugin only if progress is enabled * linted Server.js
webpack · Sep 13, 2017 · ccef0d1 · ccef0d1
1 parent d3a650f
commit ccef0d1
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 2 deletions.
diff --git a/client/index.js b/client/index.js
@@ -18,7 +18,7 @@ function getCurrentScriptSource() {
   const currentScript = scriptElements[scriptElements.length - 1];
   if (currentScript) { return currentScript.getAttribute('src'); }
   // Fail as there was no script to use.
-  throw new Error('[WDS] Failed to get current script source');
+  throw new Error('[WDS] Failed to get current script source.');
 }
 
 let urlParts;
@@ -47,6 +47,7 @@ let initial = true;
 let currentHash = '';
 let useWarningOverlay = false;
 let useErrorOverlay = false;
+let useProgress = false;
 
 const INFO = 'info';
 const WARNING = 'warning';
@@ -122,6 +123,14 @@ const onSocketMsg = {
       }
     }
   },
+  progress(progress) {
+    if (typeof document !== 'undefined') {
+      useProgress = progress;
+    }
+  },
+  'progress-update': function progressUpdate(data) {
+    if (useProgress) log.info(`[WDS] ${data.percent}% - ${data.msg}.`);
+  },
   ok() {
     sendMsg('Ok');
     if (useWarningOverlay || useErrorOverlay) overlay.clear();

diff --git a/examples/progress/README.md b/examples/progress/README.md
@@ -0,0 +1,11 @@
+# Status
+
+```shell
+node ../../bin/webpack-dev-server.js --open
+```
+
+## What should happen
+
+The script should open the browser and show a heading with "Example: progress".
+
+In `app.js`, change the text and save. You should see the compilation progress in the browser console.
diff --git a/examples/progress/app.js b/examples/progress/app.js
@@ -0,0 +1,5 @@
+'use strict';
+
+// Change the following line and save to see the compilation status
+
+document.write('Change me to see compilation progress in console...');
diff --git a/examples/progress/index.html b/examples/progress/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Progress example</title>
+		<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
+	</head>
+	<body>
+		<h1>Example: progress</h1>
+	</body>
+</html>
diff --git a/examples/progress/webpack.config.js b/examples/progress/webpack.config.js
@@ -0,0 +1,9 @@
+'use strict';
+
+module.exports = {
+  context: __dirname,
+  entry: './app.js',
+  devServer: {
+    progress: true
+  }
+};
diff --git a/lib/Server.js b/lib/Server.js
@@ -42,6 +42,7 @@ function Server(compiler, options) {
   this.headers = options.headers;
   this.clientLogLevel = options.clientLogLevel;
   this.clientOverlay = options.overlay;
+  this.progress = options.progress;
   this.disableHostCheck = !!options.disableHostCheck;
   this.publicHost = options.public;
   this.allowedHosts = options.allowedHosts;
@@ -52,6 +53,15 @@ function Server(compiler, options) {
   const invalidPlugin = () => {
     this.sockWrite(this.sockets, 'invalid');
   };
+  if (this.progress) {
+    const progressPlugin = new webpack.ProgressPlugin((percent, msg, addInfo) => {
+      percent = Math.floor(percent * 100);
+      if (percent === 100) msg = 'Compilation competed';
+      if (addInfo) msg = `${msg} (${addInfo})`;
+      this.sockWrite(this.sockets, 'progress-update', { percent, msg });
+    });
+    compiler.apply(progressPlugin);
+  }
   compiler.plugin('compile', invalidPlugin);
   compiler.plugin('invalid', invalidPlugin);
   compiler.plugin('done', (stats) => {
@@ -563,6 +573,8 @@ Server.prototype.listen = function (port, hostname, fn) {
 
       if (this.clientLogLevel) { this.sockWrite([conn], 'log-level', this.clientLogLevel); }
 
+      if (this.progress) { this.sockWrite([conn], 'progress', this.progress); }
+
       if (this.clientOverlay) { this.sockWrite([conn], 'overlay', this.clientOverlay); }
 
       if (this.hot) this.sockWrite([conn], 'hot');

diff --git a/lib/optionsSchema.json b/lib/optionsSchema.json
@@ -97,6 +97,14 @@
         }
       ]
     },
+    "progress": {
+      "description": "Shows compilation progress in browser console.",
+      "anyOf": [
+        {
+          "type": "boolean"
+        }
+      ]
+    },
     "key": {
       "description": "The contents of a SSL key.",
       "anyOf": [

diff --git a/test/Validation.test.js b/test/Validation.test.js
@@ -49,7 +49,7 @@ describe('Validation', () => {
     message: [
       " - configuration has an unknown property 'asdf'. These properties are valid:",
       '   object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, ' +
-      'watchOptions?, headers?, clientLogLevel?, overlay?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, ' +
+      'watchOptions?, headers?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, ' +
       'inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, ' +
       'compress?, proxy?, historyApiFallback?, staticOptions?, setup?, stats?, reporter?, ' +
       'noInfo?, quiet?, serverSideRender?, index?, log?, warn? }'