Merge branch 'master' into ws-string-serverMode-option

Author: hiroppy

bin/options.js

@@ -37,6 +37,10 @@ const options = {
     describe:
       'Inline mode (set to false to disable including client scripts like livereload)',
   },
+  profile: {
+    type: 'boolean',
+    describe: 'Print compilation profile data for progress steps',
+  },
   progress: {
     type: 'boolean',
     describe: 'Print compilation progress in percentage',

bin/webpack-dev-server.js

@@ -97,12 +97,6 @@ function startDevServer(config, options) {
     throw err;
   }
 
-  if (options.progress) {
-    new webpack.ProgressPlugin({
-      profile: argv.profile,
-    }).apply(compiler);
-  }
-
   try {
     server = new Server(compiler, options, log);
   } catch (err) {

lib/Server.js

@@ -23,6 +23,7 @@ const serveIndex = require('serve-index');
 const webpack = require('webpack');
 const webpackDevMiddleware = require('webpack-dev-middleware');
 const validateOptions = require('schema-utils');
+const isAbsoluteUrl = require('is-absolute-url');
 const updateCompiler = require('./utils/updateCompiler');
 const createLogger = require('./utils/createLogger');
 const getCertificate = require('./utils/getCertificate');
@@ -153,23 +154,25 @@ class Server {
   }
 
   setupProgressPlugin() {
-    const progressPlugin = new webpack.ProgressPlugin(
-      (percent, msg, addInfo) => {
-        percent = Math.floor(percent * 100);
+    // for CLI output
+    new webpack.ProgressPlugin({
+      profile: !!this.options.profile,
+    }).apply(this.compiler);
 
-        if (percent === 100) {
-          msg = 'Compilation completed';
-        }
+    // for browser console output
+    new webpack.ProgressPlugin((percent, msg, addInfo) => {
+      percent = Math.floor(percent * 100);
 
-        if (addInfo) {
-          msg = `${msg} (${addInfo})`;
-        }
+      if (percent === 100) {
+        msg = 'Compilation completed';
+      }
 
-        this.sockWrite(this.sockets, 'progress-update', { percent, msg });
+      if (addInfo) {
+        msg = `${msg} (${addInfo})`;
       }
-    );
 
-    progressPlugin.apply(this.compiler);
+      this.sockWrite(this.sockets, 'progress-update', { percent, msg });
+    }).apply(this.compiler);
   }
 
   setupApp() {
@@ -356,7 +359,7 @@ class Server {
       contentBase.forEach((item) => {
         this.app.get('*', express.static(item));
       });
-    } else if (/^(https?:)?\/\//.test(contentBase)) {
+    } else if (isAbsoluteUrl(String(contentBase))) {
       this.log.warn(
         'Using a URL as contentBase is deprecated and will be removed in the next major version. Please use the proxy option instead.'
       );
@@ -408,8 +411,8 @@ class Server {
         this.app.get('*', serveIndex(item));
       });
     } else if (
-      !/^(https?:)?\/\//.test(contentBase) &&
-      typeof contentBase !== 'number'
+      typeof contentBase !== 'number' &&
+      !isAbsoluteUrl(String(contentBase))
     ) {
       this.app.get('*', serveIndex(contentBase));
     }
@@ -418,13 +421,13 @@ class Server {
   setupWatchStaticFeature() {
     const contentBase = this.options.contentBase;
 
-    if (
-      /^(https?:)?\/\//.test(contentBase) ||
-      typeof contentBase === 'number'
-    ) {
+    if (isAbsoluteUrl(String(contentBase)) || typeof contentBase === 'number') {
       throw new Error('Watching remote files is not supported.');
     } else if (Array.isArray(contentBase)) {
       contentBase.forEach((item) => {
+        if (isAbsoluteUrl(String(item))) {
+          throw new Error('Watching remote files is not supported.');
+        }
         this._watch(item);
       });
     } else {

lib/options.json

@@ -258,6 +258,9 @@
         }
       ]
     },
+    "profile": {
+      "type": "boolean"
+    },
     "progress": {
       "type": "boolean"
     },
@@ -426,6 +429,7 @@
       "pfx": "should be {String|Buffer} (https://webpack.js.org/configuration/dev-server/#devserverpfx)",
       "pfxPassphrase": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserverpfxpassphrase)",
       "port": "should be {Number|String|Null} (https://webpack.js.org/configuration/dev-server/#devserverport)",
+      "profile": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverprofile)",
       "progress": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverprogress---cli-only)",
       "proxy": "should be {Object|Array} (https://webpack.js.org/configuration/dev-server/#devserverproxy)",
       "public": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserverpublic)",

lib/utils/createConfig.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const path = require('path');
+const isAbsoluteUrl = require('is-absolute-url');
 const defaultTo = require('./defaultTo');
 
 function createConfig(config, argv, { port }) {
@@ -46,6 +47,10 @@ function createConfig(config, argv, { port }) {
     options.liveReload = false;
   }
 
+  if (argv.profile) {
+    options.profile = argv.profile;
+  }
+
   if (argv.progress) {
     options.progress = argv.progress;
   }
@@ -60,7 +65,7 @@ function createConfig(config, argv, { port }) {
       (firstWpOpt.output && firstWpOpt.output.publicPath) || '';
 
     if (
-      !/^(https?:)?\/\//.test(options.publicPath) &&
+      !isAbsoluteUrl(String(options.publicPath)) &&
       options.publicPath[0] !== '/'
     ) {
       options.publicPath = `/${options.publicPath}`;
@@ -109,7 +114,7 @@ function createConfig(config, argv, { port }) {
       options.contentBase = options.contentBase.map((p) => path.resolve(p));
     } else if (/^[0-9]$/.test(options.contentBase)) {
       options.contentBase = +options.contentBase;
-    } else if (!/^(https?:)?\/\//.test(options.contentBase)) {
+    } else if (!isAbsoluteUrl(String(options.contentBase))) {
       options.contentBase = path.resolve(options.contentBase);
     }
   }

test/cli/cli.test.js

@@ -20,6 +20,23 @@ describe('CLI', () => {
       .then((output) => {
         expect(output.code).toEqual(0);
         expect(output.stderr.includes('0% compiling')).toBe(true);
+        // should not profile
+        expect(
+          output.stderr.includes('ms after chunk modules optimization')
+        ).toBe(false);
+        done();
+      })
+      .catch(done);
+  });
+
+  it('--progress --profile', (done) => {
+    testBin('--progress --profile')
+      .then((output) => {
+        expect(output.code).toEqual(0);
+        // should profile
+        expect(
+          output.stderr.includes('ms after chunk modules optimization')
+        ).toBe(true);
         done();
       })
       .catch(done);

test/e2e/Progress.test.js

@@ -0,0 +1,71 @@
+'use strict';
+
+/* eslint-disable
+  no-undef
+*/
+const fs = require('fs');
+const { resolve } = require('path');
+const testServer = require('../helpers/test-server');
+const reloadConfig = require('../fixtures/reload-config/webpack.config');
+const runBrowser = require('../helpers/run-browser');
+const port = require('../ports-map').Progress;
+
+const cssFilePath = resolve(__dirname, '../fixtures/reload-config/main.css');
+
+describe('client progress', () => {
+  describe('using hot', () => {
+    beforeAll((done) => {
+      fs.writeFileSync(
+        cssFilePath,
+        'body { background-color: rgb(0, 0, 255); }'
+      );
+      const options = {
+        port,
+        host: '0.0.0.0',
+        inline: true,
+        hot: true,
+        progress: true,
+        watchOptions: {
+          poll: 500,
+        },
+      };
+      testServer.startAwaitingCompilation(reloadConfig, options, done);
+    });
+
+    afterAll((done) => {
+      fs.unlinkSync(cssFilePath);
+      testServer.close(done);
+    });
+
+    describe('on browser client', () => {
+      it('should console.log progress', (done) => {
+        runBrowser().then(({ page, browser }) => {
+          const res = [];
+          page.waitForNavigation({ waitUntil: 'load' }).then(() => {
+            fs.writeFileSync(
+              cssFilePath,
+              'body { background-color: rgb(255, 0, 0); }'
+            );
+            page.waitFor(10000).then(() => {
+              browser.close().then(() => {
+                // check that there is some percentage progress output
+                const regExp = /^\[WDS\] [0-9]{1,3}% - /;
+                const match = res.find((line) => {
+                  return regExp.test(line);
+                });
+                // eslint-disable-next-line no-undefined
+                expect(match).not.toEqual(undefined);
+                done();
+              });
+            });
+          });
+
+          page.goto(`http://localhost:${port}/main`);
+          page.on('console', (data) => {
+            res.push(data.text());
+          });
+        });
+      });
+    });
+  });
+});

test/options.test.js

@@ -309,6 +309,10 @@ describe('options', () => {
         success: ['', 0, null],
         failure: [false],
       },
+      profile: {
+        success: [false],
+        failure: [''],
+      },
       progress: {
         success: [false],
         failure: [''],

test/ports-map.js

@@ -40,6 +40,9 @@ const portsList = {
   WebsocketServer: 1,
   ClientMode: 1,
   'clientMode-option': 1,
+  Progress: 1,
+  'progress-option': 1,
+  'profile-option': 1,
 };
 
 let startPort = 8079;

test/server/contentBase-option.test.js

@@ -267,6 +267,56 @@ describe('contentBase option', () => {
     });
   });
 
+  describe('testing single & multiple external paths', () => {
+    afterAll((done) => {
+      testServer.close(() => {
+        done();
+      });
+    });
+    it('Should throw exception (string)', (done) => {
+      try {
+        // eslint-disable-next-line no-unused-vars
+        server = testServer.start(config, {
+          contentBase: 'https://example.com/',
+          watchContentBase: true,
+        });
+
+        expect(true).toBe(false);
+      } catch (e) {
+        expect(e.message).toBe('Watching remote files is not supported.');
+        done();
+      }
+    });
+    it('Should throw exception (number)', (done) => {
+      try {
+        // eslint-disable-next-line no-unused-vars
+        server = testServer.start(config, {
+          contentBase: 2,
+          watchContentBase: true,
+        });
+
+        expect(true).toBe(false);
+      } catch (e) {
+        expect(e.message).toBe('Watching remote files is not supported.');
+        done();
+      }
+    });
+    it('Should throw exception (array)', (done) => {
+      try {
+        // eslint-disable-next-line no-unused-vars
+        server = testServer.start(config, {
+          contentBase: [contentBasePublic, 'https://example.com/'],
+          watchContentBase: true,
+        });
+
+        expect(true).toBe(false);
+      } catch (e) {
+        expect(e.message).toBe('Watching remote files is not supported.');
+        done();
+      }
+    });
+  });
+
   describe('default to PWD', () => {
     beforeAll((done) => {
       jest.spyOn(process, 'cwd').mockImplementation(() => contentBasePublic);

test/server/profile-option.test.js

@@ -0,0 +1,53 @@
+'use strict';
+
+const webpack = require('webpack');
+const Server = require('../../lib/Server');
+const config = require('../fixtures/simple-config/webpack.config');
+const port = require('../ports-map')['profile-option'];
+
+describe('profile', () => {
+  describe('output', () => {
+    let mockStderr;
+
+    beforeAll(() => {
+      mockStderr = jest
+        .spyOn(process.stderr, 'write')
+        .mockImplementation(() => {});
+    });
+
+    it('should show percentage progress with profile data', (done) => {
+      const compiler = webpack(config);
+      const server = new Server(compiler, {
+        port,
+        // profile will only have an effect when progress is enabled
+        progress: true,
+        profile: true,
+      });
+
+      compiler.hooks.done.tap('webpack-dev-server', () => {
+        const calls = mockStderr.mock.calls;
+        mockStderr.mockRestore();
+        let foundProgress = false;
+        let foundProfile = false;
+        calls.forEach((call) => {
+          if (call[0].includes('0% compiling')) {
+            foundProgress = true;
+          }
+
+          // this is an indicator that the profile option is enabled,
+          // so we should expect to find it in stderr since profile is enabled
+          if (call[0].includes('ms after chunk modules optimization')) {
+            foundProfile = true;
+          }
+        });
+        expect(foundProgress).toBeTruthy();
+        expect(foundProfile).toBeTruthy();
+
+        server.close(done);
+      });
+
+      compiler.run(() => {});
+      server.listen(port, 'localhost');
+    });
+  });
+});