fix: resolve dev server hot options correctly (#2022)

packages/serve/__tests__/createConfig.test.ts

@@ -27,7 +27,7 @@ describe('createConfig', () => {
             hotOnly: true,
         };
         expect(createConfig(args)).toEqual({
-            hot: 'only',
+            hotOnly: true,
         });
     });
 
@@ -37,7 +37,8 @@ describe('createConfig', () => {
             hotOnly: true,
         };
         expect(createConfig(args)).toEqual({
-            hot: 'only',
+            hot: true,
+            hotOnly: true,
         });
     });
 });

packages/serve/src/createConfig.ts

@@ -1,5 +1,9 @@
+import { utils } from 'webpack-cli';
+
 import { devServerOptionsType } from './types';
 
+const { logger } = utils;
+
 /**
  *
  * Creates a devServer config from CLI args
@@ -10,6 +14,16 @@ import { devServerOptionsType } from './types';
  */
 export default function createConfig(args): devServerOptionsType {
     const options = { ...args };
+    let isDevServer4 = false,
+        devServerVersion;
+    try {
+        // eslint-disable-next-line node/no-extraneous-require
+        devServerVersion = require('webpack-dev-server/package.json').version;
+    } catch (err) {
+        logger.error(`You need to install 'webpack-dev-server' for running 'webpack serve'.\n${err}`);
+        process.exit(2);
+    }
+    isDevServer4 = devServerVersion.startsWith('4');
 
     if (options.clientLogging) {
         options.client = {
@@ -18,8 +32,7 @@ export default function createConfig(args): devServerOptionsType {
         // clientLogging is not a valid devServer option
         delete options.clientLogging;
     }
-
-    if (options.hotOnly) {
+    if (isDevServer4 && options.hotOnly) {
         options.hot = 'only';
         // hotOnly is not a valid devServer option
         delete options.hotOnly;

packages/serve/src/index.ts

@@ -1,7 +1,9 @@
-import WebpackCLI from 'webpack-cli';
+import WebpackCLI, { utils } from 'webpack-cli';
 import startDevServer from './startDevServer';
 import parseArgs from './parseArgs';
 
+const { logger } = utils;
+
 /**
  *
  * Creates a webpack compiler and runs the devServer
@@ -10,6 +12,13 @@ import parseArgs from './parseArgs';
  * @returns {Function} invokes the devServer API
  */
 export default function serve(...args: string[]): void {
+    try {
+        // eslint-disable-next-line node/no-extraneous-require
+        require('webpack-dev-server');
+    } catch (err) {
+        logger.error(`You need to install 'webpack-dev-server' for running 'webpack serve'.\n${err}`);
+        process.exit(2);
+    }
     const cli = new WebpackCLI();
 
     const { webpackArgs, devServerArgs } = parseArgs(cli, args);

packages/serve/src/parseArgs.ts

@@ -23,12 +23,13 @@ type ArgsType = {
  * @returns {Object} parsed webpack args and dev server args objects
  */
 export default function parseArgs(cli: WebpackCLIType, args: string[]): ArgsType {
-    let devServerFlags: object[];
+    let devServerFlags;
     try {
         // eslint-disable-next-line node/no-extraneous-require
         devServerFlags = require('webpack-dev-server/bin/cli-flags').devServer;
     } catch (err) {
-        throw new Error(`You need to install 'webpack-dev-server' for running 'webpack serve'.\n${err}`);
+        logger.error(`You need to install 'webpack-dev-server' for running 'webpack serve'.\n${err}`);
+        process.exit(2);
     }
 
     const core = cli.getCoreFlags();

packages/serve/src/startDevServer.ts

@@ -22,7 +22,6 @@ export default function startDevServer(compiler, devServerArgs): object[] {
     const usedPorts: number[] = [];
     devServerOptions.forEach((devServerOpts): void => {
         const options = mergeOptions(cliOptions, devServerOpts);
-
         options.host = options.host || 'localhost';
         options.port = options.port || 8080;
 

test/serve/basic/serve-basic.test.js

@@ -3,7 +3,7 @@
 const { yellow, options } = require('colorette');
 const path = require('path');
 const getPort = require('get-port');
-const { runServe } = require('../../utils/test-utils');
+const { runServe, isDevServer4 } = require('../../utils/test-utils');
 
 const testPath = path.resolve(__dirname);
 
@@ -56,6 +56,13 @@ describe('basic serve usage', () => {
         expect(stderr).toHaveLength(0);
     });
 
+    it('uses hot-only flag to alter bundle', async () => {
+        const { stdout, stderr } = await runServe(['--port', port, isDevServer4 ? '--hot only' : '--hot-only'], testPath);
+        expect(stdout).toContain('main.js');
+        expect(stdout).toContain('HotModuleReplacementPlugin');
+        expect(stderr).toBeFalsy();
+    });
+
     it('uses no-hot flag', async () => {
         const { stdout, stderr } = await runServe(['--port', port, '--no-hot'], testPath);
         expect(stdout).toContain('main.js');

test/utils/test-utils.js

@@ -7,11 +7,13 @@ const { sync: spawnSync, node: execaNode } = execa;
 const { Writable } = require('readable-stream');
 const concat = require('concat-stream');
 const { version } = require('webpack');
+const { version: devServerVersion } = require('webpack-dev-server/package.json');
 const { hyphenToUpperCase } = require('../../packages/webpack-cli/lib/utils/arg-utils');
 
 const WEBPACK_PATH = path.resolve(__dirname, '../../packages/webpack-cli/bin/cli.js');
 const ENABLE_LOG_COMPILATION = process.env.ENABLE_PIPE || false;
 const isWebpack5 = version.startsWith('5');
+const isDevServer4 = devServerVersion.startsWith('4');
 const isWindows = process.platform === 'win32';
 
 /**
@@ -248,5 +250,6 @@ module.exports = {
     runInfo,
     hyphenToUpperCase,
     isWebpack5,
+    isDevServer4,
     isWindows,
 };