diff --git a/client/index.js b/client/index.js
index 34a32358bc..ea9ffc41ab 100644
--- 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
new file mode 100644
index 0000000000..de22743c2d
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..05573ed58d
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..3a1765cd01
--- /dev/null
+++ b/examples/progress/index.html
@@ -0,0 +1,10 @@
+
+
+
+ Progress example
+
+
+
+ Example: progress
+
+
diff --git a/examples/progress/webpack.config.js b/examples/progress/webpack.config.js
new file mode 100644
index 0000000000..a21a9875d4
--- /dev/null
+++ 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
index 8c07af41d6..e8bed8a054 100644
--- 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
index be1a9cd963..ecffde0c89 100644
--- 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
index 3c49bda22c..a04e329111 100644
--- 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? }'