fix(gatsby): don't output file-loader assets to .cache (#37284) (#37300)

* fix(gatsby): don't output file-loader assets to .cache

* use adjusted settings also for develop-html stage, as that one uses ROUTES_DIRECTORY too

* update comment

* some types for file-loader common options

(cherry picked from commit 3cbad19)

Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>

packages/gatsby/src/utils/webpack-utils.ts

@@ -23,6 +23,7 @@ import { IProgram, Stage } from "../commands/types"
 import { eslintConfig, eslintRequiredConfig } from "./eslint-config"
 import { store } from "../redux"
 import type { RuleSetUseItem } from "webpack"
+import { ROUTES_DIRECTORY } from "../constants"
 
 type Loader = string | { loader: string; options?: { [name: string]: any } }
 type LoaderResolver<T = Record<string, unknown>> = (options?: T) => Loader
@@ -199,6 +200,25 @@ export const createWebpackUtils = (
       return rule
     }
 
+  const fileLoaderCommonOptions: {
+    name: string
+    publicPath?: string
+    outputPath?: string
+  } = {
+    name: `${assetRelativeRoot}[name]-[hash].[ext]`,
+  }
+
+  if (stage === `build-html` || stage === `develop-html`) {
+    // build-html and develop-html outputs to `.cache/page-ssr/routes/` (ROUTES_DIRECTORY)
+    // so this config is setting it to output assets to `public` (outputPath)
+    // while preserving "url" (publicPath)
+    fileLoaderCommonOptions.outputPath = path.relative(
+      ROUTES_DIRECTORY,
+      `public`
+    )
+    fileLoaderCommonOptions.publicPath = `/`
+  }
+
   const loaders: ILoaderUtils = {
     json: (options = {}) => {
       return {
@@ -345,7 +365,7 @@ export const createWebpackUtils = (
       return {
         loader: require.resolve(`file-loader`),
         options: {
-          name: `${assetRelativeRoot}[name]-[hash].[ext]`,
+          ...fileLoaderCommonOptions,
           ...options,
         },
       }
@@ -356,7 +376,7 @@ export const createWebpackUtils = (
         loader: require.resolve(`url-loader`),
         options: {
           limit: 10000,
-          name: `${assetRelativeRoot}[name]-[hash].[ext]`,
+          ...fileLoaderCommonOptions,
           fallback: require.resolve(`file-loader`),
           ...options,
         },