fix(gatsby-plugin-netlify): add all .js files from webpack.stats.json…

… to _headers (#12521)

## Description

The issue was that only the first file was taken from each key from webpack.stats.json. Modified it to get all of them and render them accordingly.

## Related Issues

Fixes to #9828

packages/gatsby-plugin-netlify/src/build-headers-program.js

@@ -1,5 +1,6 @@
 import _ from "lodash"
 import { writeFile, existsSync } from "fs-extra"
+import { parse } from "path"
 import kebabHash from "kebab-hash"
 import { HEADER_COMMENT } from "./constants"
 
@@ -41,8 +42,18 @@ function createScriptHeaderGenerator(manifest, pathPrefix) {
       return null
     }
 
-    // Always add starting slash, as link entries start with slash as relative to deploy root
-    return linkTemplate(`${pathPrefix}/${chunk}`)
+    // convert to array if it's not already
+    const chunks = _.isArray(chunk) ? chunk : [chunk]
+
+    return chunks
+      .filter(script => {
+        const parsed = parse(script)
+        // handle only .js, .css content is inlined already
+        // and doesn't need to be pushed
+        return parsed.ext === `.js`
+      })
+      .map(script => linkTemplate(`${pathPrefix}/${script}`))
+      .join(`\n  `)
   }
 }
 

packages/gatsby-plugin-netlify/src/plugin-data.js

@@ -1,26 +1,18 @@
-import _ from "lodash"
 import path from "path"
 
 export function buildPrefixer(prefix, ...paths) {
   return (...subpaths) => path.join(prefix, ...paths, ...subpaths)
 }
 
-// Webpack stats map to an array if source maps are enabled.
-// We normalize to make direct map.
-function normalizeStats(stats) {
-  return _.mapValues(stats.assetsByChunkName, script =>
-    _.isArray(script) ? script[0] : script
-  )
-}
-
 // This function assembles data across the manifests and store to match a similar
 // shape of `static-entry.js`. With it, we can build headers that point to the correct
 // hashed filenames and ensure we pull in the componentChunkName.
 export default function makePluginData(store, assetsManifest, pathPrefix) {
   const { program, pages: storePages } = store.getState()
   const publicFolder = buildPrefixer(program.directory, `public`)
   const stats = require(publicFolder(`webpack.stats.json`))
-  const chunkManifest = normalizeStats(stats)
+  // Get all the files, not just the first
+  const chunkManifest = stats.assetsByChunkName
   const pages = storePages
 
   // We combine the manifest of JS and the manifest of assets to make a lookup table.