fix: use graceful shutdown when file system cache is enabled

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

@@ -2490,14 +2490,19 @@ class WebpackCLI implements IWebpackCLI {
       return;
     }
 
-    const isWatch = (compiler: WebpackCompiler): boolean =>
+    const needGracefulShutdown = (compiler: WebpackCompiler): boolean =>
       Boolean(
         this.isMultipleCompiler(compiler)
-          ? compiler.compilers.some((compiler) => compiler.options.watch)
-          : compiler.options.watch,
+          ? compiler.compilers.some(
+              (compiler) =>
+                compiler.options.watch ||
+                (compiler.options.cache && compiler.options.cache.type === "filesystem"),
+            )
+          : compiler.options.watch ||
+              (compiler.options.cache && compiler.options.cache.type === "filesystem"),
       );
 
-    if (isWatch(compiler)) {
+    if (needGracefulShutdown(compiler)) {
       let needForceShutdown = false;
 
       for (const signal of EXIT_SIGNALS) {
@@ -2507,13 +2512,17 @@ class WebpackCLI implements IWebpackCLI {
             process.exit(0);
           }
 
-          this.logger.info(
-            "Gracefully shutting down. To force exit, press ^C again. Please wait...",
-          );
+          // Output message after delay to avoid extra logging
+          const timeout = setTimeout(() => {
+            this.logger.info(
+              "Gracefully shutting down. To force exit, press ^C again. Please wait...",
+            );
+          }, 2000);
 
           needForceShutdown = true;
 
           compiler.close(() => {
+            clearTimeout(timeout);
             process.exit(0);
           });
         };

test/build/cache/cache.test.js

@@ -2,7 +2,7 @@
 
 const fs = require("node:fs");
 const path = require("node:path");
-const { run } = require("../../utils/test-utils");
+const { isWindows, processKill, run, runWatch } = require("../../utils/test-utils");
 
 describe("cache", () => {
   it("should work", async () => {
@@ -218,4 +218,39 @@ describe("cache", () => {
     expect(stderr).toBeTruthy();
     expect(stdout).toBeTruthy();
   });
+
+  if (!isWindows) {
+    it("should graceful shutdown", async () => {
+      fs.rmSync(
+        path.join(
+          __dirname,
+          "../../../node_modules/.cache/webpack/cache-graceful-shutdown-development",
+        ),
+        {
+          recursive: true,
+          force: true,
+        },
+      );
+
+      let stdout = "";
+
+      await runWatch(__dirname, ["--config", "./graceful-exit.webpack.config.js", "--watch"], {
+        handler: (proc) => {
+          proc.stdout.on("data", (chunk) => {
+            const data = chunk.toString();
+
+            stdout += data;
+
+            if (data.includes("app.bundle.js")) {
+              processKill(proc);
+            }
+          });
+        },
+      });
+
+      expect(stdout).toContain(
+        "Gracefully shutting down. To force exit, press ^C again. Please wait...",
+      );
+    });
+  }
 });

test/build/cache/graceful-exit.webpack.config.js

@@ -0,0 +1,36 @@
+const path = require("node:path");
+
+class InfiniteWaitPlugin {
+  apply(compiler) {
+    compiler.hooks.shutdown.tapPromise("Graceful Exit Test", async () => {
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, 3000);
+      });
+    });
+  }
+}
+
+module.exports = {
+  mode: "development",
+  name: "cache-graceful-shutdown",
+  cache: {
+    type: "filesystem",
+    buildDependencies: {
+      config: [__filename],
+    },
+  },
+  infrastructureLogging: {
+    debug: /cache/,
+  },
+  entry: {
+    app: "./src/main.js",
+  },
+  output: {
+    filename: "[name].bundle.js",
+    chunkFilename: "[name].bundle.js",
+    path: path.resolve(__dirname, "dist"),
+  },
+  plugins: [new InfiniteWaitPlugin()],
+};