diff --git a/e2e-tests/development-runtime/cypress/integration/functionality/yaml.js b/e2e-tests/development-runtime/cypress/integration/functionality/yaml.js
new file mode 100644
index 0000000000000..c7222803583b6
--- /dev/null
+++ b/e2e-tests/development-runtime/cypress/integration/functionality/yaml.js
@@ -0,0 +1,11 @@
+describe(`webpack-loader: yaml`, () => {
+  beforeEach(() => {
+    cy.visit(`/webpack-loader/yaml/`).waitForRouteChange()
+  })
+
+  it(`outputs the YAML file as JSON`, () => {
+    cy.getTestElement(`webpack-loader-yaml`)
+      .invoke(`text`)
+      .should(`eq`, `[{"name":"Paul"},{"name":"Leto II"},{"name":"Ghanima"},{"name":"Alia"}]`)
+  })
+})
\ No newline at end of file
diff --git a/e2e-tests/development-runtime/src/pages/webpack-loader/yaml.js b/e2e-tests/development-runtime/src/pages/webpack-loader/yaml.js
new file mode 100644
index 0000000000000..c3420b53da368
--- /dev/null
+++ b/e2e-tests/development-runtime/src/pages/webpack-loader/yaml.js
@@ -0,0 +1,16 @@
+import * as React from "react"
+import Layout from "../../components/layout"
+
+import inputYaml from "../../test-files/input.yaml"
+
+const YamlPage = () => (
+  <Layout>
+    <pre>
+      <code data-testid="webpack-loader-yaml">
+        {JSON.stringify(inputYaml, null, 0)}
+      </code>
+    </pre>
+  </Layout>
+)
+
+export default YamlPage
\ No newline at end of file
diff --git a/e2e-tests/development-runtime/src/test-files/input.yaml b/e2e-tests/development-runtime/src/test-files/input.yaml
new file mode 100644
index 0000000000000..ac8e9a044492f
--- /dev/null
+++ b/e2e-tests/development-runtime/src/test-files/input.yaml
@@ -0,0 +1,4 @@
+- name: Paul
+- name: Leto II
+- name: Ghanima
+- name: Alia
diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/packages/gatsby/src/utils/webpack-utils.ts
index 076f914028db9..5af187c80ebdc 100644
--- a/packages/gatsby/src/utils/webpack-utils.ts
+++ b/packages/gatsby/src/utils/webpack-utils.ts
@@ -232,8 +232,11 @@ export const createWebpackUtils = (
     },
     yaml: (options = {}) => {
       return {
-        options,
         loader: require.resolve(`yaml-loader`),
+        options: {
+          asJSON: true,
+          ...options,
+        },
       }
     },