feat(gatsby): add webpack-logging plugin to Gatsby for debugging (#33214

)

packages/gatsby/src/commands/build.ts

@@ -57,6 +57,7 @@ module.exports = async function build(program: IBuildArgs): Promise<void> {
   // global gatsby object to use without store
   global.__GATSBY = {
     buildId: uuidv4(),
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     root: program!.directory,
   }
 
@@ -106,7 +107,9 @@ module.exports = async function build(program: IBuildArgs): Promise<void> {
 
   if (_CFLAGS_.GATSBY_MAJOR === `4` && shouldGenerateEngines()) {
     // bundle graphql-engine
-    engineBundlingPromises.push(createGraphqlEngineBundle())
+    engineBundlingPromises.push(
+      createGraphqlEngineBundle(program.directory, report, program.verbose)
+    )
   }
 
   const graphqlRunner = new GraphQLRunner(store, {
@@ -185,7 +188,16 @@ module.exports = async function build(program: IBuildArgs): Promise<void> {
 
   if (_CFLAGS_.GATSBY_MAJOR === `4` && shouldGenerateEngines()) {
     // client bundle is produced so static query maps should be ready
-    engineBundlingPromises.push(createPageSSRBundle())
+    const state = store.getState()
+    engineBundlingPromises.push(
+      createPageSSRBundle({
+        rootDir: program.directory,
+        components: state.components,
+        staticQueriesByTemplate: state.staticQueriesByTemplate,
+        reporter: report,
+        isVerbose: program.verbose,
+      })
+    )
   }
 
   const webpackCompilationHash = stats.hash

packages/gatsby/src/schema/graphql-engine/bundle-webpack.ts

@@ -5,19 +5,28 @@ import * as fs from "fs-extra"
 import webpack from "webpack"
 import { printQueryEnginePlugins } from "./print-plugins"
 import mod from "module"
+import { WebpackLoggingPlugin } from "../../utils/webpack/webpack-logging"
+import reporter from "gatsby-cli/lib/reporter"
+
+type Reporter = typeof reporter
 
 const extensions = [`.mjs`, `.js`, `.json`, `.node`, `.ts`, `.tsx`]
 
 const outputDir = path.join(process.cwd(), `.cache`, `query-engine`)
 
-export async function createGraphqlEngineBundle(): Promise<any> {
+export async function createGraphqlEngineBundle(
+  rootDir: string,
+  reporter: Reporter,
+  isVerbose?: boolean
+): Promise<webpack.Compilation | undefined> {
   const schemaSnapshotString = await fs.readFile(
-    process.cwd() + `/.cache/schema.gql`,
+    path.join(rootDir, `.cache`, `schema.gql`),
     `utf-8`
   )
   await printQueryEnginePlugins()
 
   const compiler = webpack({
+    name: `Query Engine`,
     // mode: `production`,
     mode: `none`,
     entry: path.join(__dirname, `entry.js`),
@@ -89,7 +98,9 @@ export async function createGraphqlEngineBundle(): Promise<any> {
         "process.env.GATSBY_SKIP_WRITING_SCHEMA_TO_FILE": `true`,
         SCHEMA_SNAPSHOT: JSON.stringify(schemaSnapshotString),
       }),
-    ],
+      process.env.GATSBY_WEBPACK_LOGGING?.includes(`query-engine`) &&
+        new WebpackLoggingPlugin(rootDir, reporter, isVerbose),
+    ].filter(Boolean) as Array<webpack.WebpackPluginInstance>,
   })
 
   return new Promise((resolve, reject) => {

packages/gatsby/src/utils/page-ssr-module/bundle-webpack.ts

@@ -1,31 +1,41 @@
 import * as path from "path"
-import { store } from "../../redux"
 import webpack from "webpack"
 import mod from "module"
-
+import { WebpackLoggingPlugin } from "../../utils/webpack/webpack-logging"
+import reporter from "gatsby-cli/lib/reporter"
 import type { ITemplateDetails } from "./entry"
 
 import {
   getScriptsAndStylesForTemplate,
   readWebpackStats,
 } from "../client-assets-for-template"
 import { writeStaticQueryContext } from "../static-query-utils"
+import { IGatsbyState } from "../../redux/types"
+
+type Reporter = typeof reporter
 
 const extensions = [`.mjs`, `.js`, `.json`, `.node`, `.ts`, `.tsx`]
 const outputDir = path.join(process.cwd(), `.cache`, `page-ssr`)
 
-export async function createPageSSRBundle(): Promise<any> {
-  const { program, components } = store.getState()
-  const webpackStats = await readWebpackStats(
-    path.join(program.directory, `public`)
-  )
+export async function createPageSSRBundle({
+  rootDir,
+  components,
+  staticQueriesByTemplate,
+  reporter,
+  isVerbose = false,
+}: {
+  rootDir: string
+  components: IGatsbyState["components"]
+  staticQueriesByTemplate: IGatsbyState["staticQueriesByTemplate"]
+  reporter: Reporter
+  isVerbose?: boolean
+}): Promise<webpack.Compilation | undefined> {
+  const webpackStats = await readWebpackStats(path.join(rootDir, `public`))
 
   const toInline: Record<string, ITemplateDetails> = {}
   for (const pageTemplate of components.values()) {
     const staticQueryHashes =
-      store
-        .getState()
-        .staticQueriesByTemplate.get(pageTemplate.componentPath) || []
+      staticQueriesByTemplate.get(pageTemplate.componentPath) || []
     await writeStaticQueryContext(
       staticQueryHashes,
       pageTemplate.componentChunkName
@@ -41,6 +51,7 @@ export async function createPageSSRBundle(): Promise<any> {
     }
   }
   const compiler = webpack({
+    name: `Page Engine`,
     mode: `none`,
     entry: path.join(__dirname, `entry.js`),
     output: {
@@ -100,14 +111,17 @@ export async function createPageSSRBundle(): Promise<any> {
     resolve: {
       extensions,
       alias: {
-        ".cache": `${program.directory}/.cache/`,
+        ".cache": `${rootDir}/.cache/`,
       },
     },
     plugins: [
       new webpack.DefinePlugin({
         INLINED_TEMPLATE_TO_DETAILS: JSON.stringify(toInline),
       }),
-    ],
+      process.env.GATSBY_WEBPACK_LOGGING?.includes(`page-engine`)
+        ? new WebpackLoggingPlugin(rootDir, reporter, isVerbose)
+        : false,
+    ].filter(Boolean) as Array<webpack.WebpackPluginInstance>,
   })
 
   return new Promise((resolve, reject) => {

packages/gatsby/src/utils/webpack.config.js

@@ -19,6 +19,7 @@ import { hasLocalEslint } from "./local-eslint-config-finder"
 import { getAbsolutePathForVirtualModule } from "./gatsby-webpack-virtual-modules"
 import { StaticQueryMapper } from "./webpack/static-query-mapper"
 import { ForceCssHMRForEdgeCases } from "./webpack/force-css-hmr-for-edge-cases"
+import { WebpackLoggingPlugin } from "./webpack/webpack-logging"
 import { hasES6ModuleSupport } from "./browserslist"
 import { builtinModules } from "module"
 import { shouldGenerateEngines } from "./engines-helpers"
@@ -232,7 +233,9 @@ module.exports = async (
 
       plugins.virtualModules(),
       new BabelConfigItemsCacheInvalidatorPlugin(),
-    ]
+      process.env.GATSBY_WEBPACK_LOGGING?.split(`,`)?.includes(stage) &&
+        new WebpackLoggingPlugin(program.directory, report, program.verbose),
+    ].filter(Boolean)
 
     switch (stage) {
       case `develop`: {
@@ -520,6 +523,7 @@ module.exports = async (
   }
 
   const config = {
+    name: stage,
     // Context is the base directory for resolving the entry option.
     context: directory,
     entry: getEntry(),

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

@@ -0,0 +1,58 @@
+import { ProgressPlugin } from "webpack"
+import resolveFrom from "resolve-from"
+import type reporter from "gatsby-cli/lib/reporter"
+import type { Compiler } from "webpack"
+
+type Reporter = typeof reporter
+
+export class WebpackLoggingPlugin {
+  private PLUGIN_NAME = `WebpackLogging`
+  private rootDir: string
+  private reporter: Reporter
+  private isVerbose = false
+
+  constructor(rootDir: string, reporter: Reporter, isVerbose = false) {
+    this.rootDir = rootDir
+    this.reporter = reporter
+    this.isVerbose = isVerbose
+  }
+
+  apply(compiler: Compiler): void {
+    compiler.options.infrastructureLogging = {
+      level: `verbose`,
+      debug: /FileSystemInfo/,
+    }
+    compiler.options.profile = true
+
+    new ProgressPlugin({
+      profile: true,
+    }).apply(compiler)
+
+    // if webpack bundle analyzer is installed lets use it
+    const webpackBundleAnalyzerPath = resolveFrom.silent(
+      this.rootDir,
+      `webpack-bundle-analyzer`
+    )
+    if (webpackBundleAnalyzerPath) {
+      compiler.hooks.beforeRun.tapPromise(this.PLUGIN_NAME, () =>
+        import(webpackBundleAnalyzerPath).then(({ BundleAnalyzerPlugin }) => {
+          new BundleAnalyzerPlugin({
+            analyzerMode: `static`,
+            openAnalyzer: false,
+            title: compiler.name,
+            reportFilename: `report.html`,
+          }).apply(compiler)
+        })
+      )
+    }
+
+    compiler.hooks.done.tap(this.PLUGIN_NAME, stats => {
+      this.reporter.log(
+        stats.toString({
+          colors: true,
+          logging: this.isVerbose ? `verbose` : `log`,
+        })
+      )
+    })
+  }
+}

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "ESNext",
+    "module": "ESNext",
     "moduleResolution": "node",
     "noUnusedLocals": true,
     "noUnusedParameters": true,