fix: false positive warning when --watch used (#3783)

Author: alexander-akait

packages/serve/src/index.ts

@@ -47,10 +47,7 @@ class ServeCommand {
           process.exit(2);
         }
 
-        const builtInOptions = cli.getBuiltInOptions().filter(
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          (option: any) => option.name !== "watch",
-        );
+        const builtInOptions = cli.getBuiltInOptions();
 
         return [...builtInOptions, ...devServerFlags];
       },
@@ -110,6 +107,8 @@ class ServeCommand {
           env: { WEBPACK_SERVE: true, ...options.env },
         };
 
+        webpackCLIOptions.isWatchingLikeCommand = true;
+
         const compiler = await cli.createCompiler(webpackCLIOptions);
 
         if (!compiler) {

packages/webpack-cli/src/types.ts

@@ -212,6 +212,7 @@ interface WebpackRunOptions extends WebpackOptionsNormalized {
   argv?: Argv;
   env: Env;
   failOnWarnings?: boolean;
+  isWatchingLikeCommand?: boolean;
 }
 
 /**

packages/webpack-cli/src/webpack-cli.ts

@@ -2163,11 +2163,10 @@ class WebpackCLI implements IWebpackCLI {
 
       // Output warnings
       if (
-        (typeof originalWatchValue !== "undefined" ||
-          (options.argv && typeof options.argv.watch !== "undefined")) &&
+        options.isWatchingLikeCommand &&
         options.argv &&
         options.argv.env &&
-        (options.argv.env["WEBPACK_WATCH"] || options.argv.env["WEBPACK_SERVE"])
+        (typeof originalWatchValue !== "undefined" || typeof options.argv.watch !== "undefined")
       ) {
         this.logger.warn(
           `No need to use the '${
@@ -2418,6 +2417,7 @@ class WebpackCLI implements IWebpackCLI {
 
     if (isWatchCommand) {
       options.watch = true;
+      options.isWatchingLikeCommand = true;
     }
 
     compiler = await this.createCompiler(options as WebpackDevServerOptions, callback);

test/serve/basic/__snapshots__/serve-basic.test.js.snap.devServer4.webpack5

@@ -8,19 +8,14 @@ exports[`basic serve usage should log an error on unknown flag: stderr 1`] = `
 exports[`basic serve usage should log an error on unknown flag: stdout 1`] = `""`;
 
 exports[`basic serve usage should log error on using '--watch' flag with serve: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '--watch'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
-`;
-
-exports[`basic serve usage should log error on using '--watch' flag with serve: stdout 1`] = `""`;
-
-exports[`basic serve usage should log error on using '-w' alias with serve: stderr 1`] = `
-"[webpack-cli] Error: Unknown option '-w'
-[webpack-cli] Run 'webpack --help' to see available commands and options"
+"[webpack-cli] No need to use the 'serve' command together with '{ watch: true | false }' or '--watch'/'--no-watch' configuration, it does not make sense.
+<i> [webpack-dev-server] Project is running at:
+<i> [webpack-dev-server] Loopback: http://localhost:<port>/
+<i> [webpack-dev-server] On Your Network (IPv4): http://<network-ip-v4>:<port>/
+<i> [webpack-dev-server] On Your Network (IPv6): http://[<network-ip-v6>]:<port>/
+<i> [webpack-dev-server] Content not from webpack is served from '<cwd>/test/serve/basic/public' directory"
 `;
 
-exports[`basic serve usage should log error on using '-w' alias with serve: stdout 1`] = `""`;
-
 exports[`basic serve usage should log used supplied config with serve: stderr 1`] = `
 "    [webpack-cli] Compiler starting... 
     [webpack-cli] Compiler is using config: '<cwd>/test/serve/basic/log.config.js'
@@ -34,6 +29,15 @@ exports[`basic serve usage should log used supplied config with serve: stderr 1`
     [webpack-cli] Compiler is watching files for updates..."
 `;
 
+exports[`basic serve usage should log warning on using '-w' alias with serve: stderr 1`] = `
+"[webpack-cli] No need to use the 'serve' command together with '{ watch: true | false }' or '--watch'/'--no-watch' configuration, it does not make sense.
+<i> [webpack-dev-server] Project is running at:
+<i> [webpack-dev-server] Loopback: http://localhost:<port>/
+<i> [webpack-dev-server] On Your Network (IPv4): http://<network-ip-v4>:<port>/
+<i> [webpack-dev-server] On Your Network (IPv6): http://[<network-ip-v6>]:<port>/
+<i> [webpack-dev-server] Content not from webpack is served from '<cwd>/test/serve/basic/public' directory"
+`;
+
 exports[`basic serve usage should respect the "publicPath" option from configuration (from the "devServer" options): stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
 <i> [webpack-dev-server] Loopback: http://localhost:<port>/

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

@@ -373,17 +373,19 @@ describe("basic serve usage", () => {
   it("should log error on using '--watch' flag with serve", async () => {
     const { exitCode, stdout, stderr } = await runWatch(testPath, ["serve", "--watch"]);
 
-    expect(exitCode).toBe(2);
+    expect(exitCode).toBe(0);
     expect(normalizeStderr(stderr)).toMatchSnapshot("stderr");
-    expect(normalizeStdout(stdout)).toMatchSnapshot("stdout");
+    expect(stdout).toContain("HotModuleReplacementPlugin");
+    expect(stdout).toContain("main.js");
   });
 
-  it("should log error on using '-w' alias with serve", async () => {
+  it("should log warning on using '-w' alias with serve", async () => {
     const { exitCode, stdout, stderr } = await runWatch(testPath, ["serve", "-w"]);
 
-    expect(exitCode).toBe(2);
+    expect(exitCode).toBe(0);
     expect(normalizeStderr(stderr)).toMatchSnapshot("stderr");
-    expect(normalizeStdout(stdout)).toMatchSnapshot("stdout");
+    expect(stdout).toContain("HotModuleReplacementPlugin");
+    expect(stdout).toContain("main.js");
   });
 
   it("should log an error on unknown flag", async () => {

test/watch/basic/basic.config.js

@@ -0,0 +1 @@
+module.exports = {};

test/watch/basic/basic.test.js

@@ -47,6 +47,14 @@ describe("basic", () => {
         }
       }
     });
+
+    proc.stderr.on("data", (chunk) => {
+      const data = chunk.toString();
+
+      expect(data).not.toContain(
+        " No need to use the 'watch' command together with '{ watch: true | false }' or '--watch'/'--no-watch' configuration, it does not make sense.",
+      );
+    });
   });
 
   it("should recompile upon file change using the `watch` command", (done) => {
@@ -77,6 +85,14 @@ describe("basic", () => {
         }
       }
     });
+
+    proc.stderr.on("data", (chunk) => {
+      const data = chunk.toString();
+
+      expect(data).not.toContain(
+        " No need to use the 'watch' command together with '{ watch: true | false }' or '--watch'/'--no-watch' configuration, it does not make sense.",
+      );
+    });
   });
 
   it("should recompile upon file change using the `watch` command and entries syntax", (done) => {