我对react、gatsby、webpack和其他东西都很陌生。
下面是我的webpack.config.js文件：

const path = require('path');

module.exports = {
  module: {
    test: /\.(png|svg|jpg|gif|pdf)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      }
    ]
  }
};

下面是我的简历.tsx文件：

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import samplePDF from '../../static/assets/cv.pdf';

function Resume() {
  const [numPages, setNumPages] = useState(null);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div className="App">
      <div style={{ height: '600px', overflow: 'auto' }}>
        <Document
          file={samplePDF}
          onLoadSuccess={onDocumentLoadSuccess}
        >
          {Array.from(new Array(numPages), (el, index) => (
            <Page key={`page_${index + 1}`} pageNumber={index + 1} />
          ))}
        </Document>
      </div>
    </div>
  );
}

export default Resume;

因为我是react和webpack的新手。所以我不知道为什么它还是不工作。
以下是项目结构：

.
├── blog
│   ├── 2021-06-01-advice-for-junior-developers
│   │   ├── background.jpg
│   │   └── index.mdx
│   ├── 2021-08-18-shopify-update
│   │   ├── background.jpg
│   │   └── index.mdx
│   ├── 2021-08-22-what-happens-next
│   │   ├── background.jpg
│   │   ├── index.mdx
│   │   └── og_background.jpg
│   ├── 2021-10-26-new-house
│   │   ├── background.jpg
│   │   ├── backyard.jpg
│   │   ├── botw.jpg
│   │   ├── index.mdx
│   │   ├── livingroom.jpg
│   │   └── paint.jpg
│   ├── 2021-11-01-one-year-back-in-canada
│   │   ├── background.png
│   │   └── index.mdx
│   ├── 2021-11-27-goodbye-dave
│   │   ├── background.jpg
│   │   ├── chirp.jpg
│   │   ├── corner.jpg
│   │   ├── dave.jpg
│   │   └── index.mdx
│   ├── 2022-01-01-2021-my-year-of-closed-rings
│   │   ├── background.jpg
│   │   ├── exercise.png
│   │   ├── index.mdx
│   │   ├── running.png
│   │   ├── strava_above.png
│   │   ├── strava_fitness.png
│   │   ├── vo2_max.png
│   │   └── watch_rings.png
│   ├── 2022-01-23-how-im-thinking-about-my-career-in-2022
│   │   ├── background.jpg
│   │   └── index.mdx
│   ├── 2022-03-31-drywall-repair
│   │   ├── background.png
│   │   └── index.mdx
│   ├── 2022-04-03-typescript-ergonomics
│   │   ├── background.jpg
│   │   └── index.mdx
│   ├── 2022-07-28-summer-fam-jam
│   │   ├── background.png
│   │   └── index.mdx
│   ├── 2022-09-12-depresso
│   │   ├── background.jpg
│   │   ├── espresso.jpg
│   │   └── index.mdx
│   ├── 2022-10-06-mastodon-technology-shutdown
│   │   ├── background.png
│   │   └── index.mdx
│   └── 2023-02-26-re-espresso
│       └── index.mdx
├── bootup
│   ├── createPages.ts
│   ├── onCreateNode.ts
│   └── onCreateWebpackConfig.ts
├── gatsby-config.js
├── gatsby-node.js
├── LICENSE
├── netlify.toml
├── package.json
├── package-lock.json
├── patches
│   └── @merc+react-timeline+0.1.42.patch
├── public
│   ├── assets
│   │   ├── bg
│   │   │   ├── 1.jpg
│   │   │   ├── 2.jpg
│   │   │   ├── 3.jpg
│   │   │   ├── 404.jpg
│   │   │   ├── 4.jpg
│   │   │   ├── about.jpg
│   │   │   ├── bg2.jpg
│   │   │   ├── bg3.jpg
│   │   │   ├── bg4.jpg
│   │   │   ├── bg5.jpg
│   │   │   ├── bg6.jpg
│   │   │   ├── bg.jpg
│   │   │   ├── bg.png
│   │   │   ├── books.jpg
│   │   │   ├── default.jpg
│   │   │   ├── home.png
│   │   │   ├── portfolio.jpg
│   │   │   ├── search.jpg
│   │   │   └── speaking.jpg
│   │   ├── bg2.jpg
│   │   ├── bg3.jpg
│   │   ├── bg4.jpg
│   │   ├── bg5.jpg
│   │   ├── bg6.jpg
│   │   ├── bg.jpg
│   │   ├── bg.png
│   │   ├── books
│   │   │   ├── iosfrp.jpg
│   │   │   ├── uicollectionview.jpg
│   │   │   └── yourfirstswiftapp.png
│   │   ├── cv.pdf
│   │   ├── featured
│   │   │   ├── asking-for-help-in-open-source.jpg
│   │   │   ├── building_better_software.png
│   │   │   ├── building_compassionate_software.jpg
│   │   │   ├── empathetic_civilization.jpg
│   │   │   ├── normaling_struggle.png
│   │   │   └── perspective_of_the_polyglot.png
│   │   ├── home.png
│   │   ├── portfolio
│   │   │   ├── 35mm.jpg
│   │   │   ├── 500px.jpg
│   │   │   ├── artsy.jpg
│   │   │   ├── blogging.jpg
│   │   │   ├── books.jpg
│   │   │   ├── callout_small.svg
│   │   │   ├── callout.svg
│   │   │   ├── community_header.jpg
│   │   │   ├── creativity_header.jpg
│   │   │   ├── education_header.jpg
│   │   │   ├── exposure_hover.png
│   │   │   ├── exposure.png
│   │   │   ├── exposure.svg
│   │   │   ├── software_header.jpg
│   │   │   ├── speaking.jpg
│   │   │   ├── team.jpg
│   │   │   └── treehouse.jpg
│   │   ├── resume.pdf
│   │   ├── siteimage_dark.png
│   │   ├── siteimage.png
│   │   ├── speaking
│   │   │   ├── getintouch.jpg
│   │   │   ├── pasttalks.jpg
│   │   │   ├── talks
│   │   │   │   ├── 500px.png
│   │   │   │   ├── altconf.png
│   │   │   │   ├── appbuilders.png
│   │   │   │   ├── appdevcon.png
│   │   │   │   ├── brooklyn.png
│   │   │   │   ├── buildingcompassionatesoftware.png
│   │   │   │   ├── catchingup.png
│   │   │   │   ├── collectionview.png
│   │   │   │   ├── comparative-async.png
│   │   │   │   ├── craft.png
│   │   │   │   ├── dotswift.png
│   │   │   │   ├── functional.png
│   │   │   │   ├── functionalreactive.png
│   │   │   │   ├── ghfordesigners.png
│   │   │   │   ├── goto.png
│   │   │   │   ├── interfaces.png
│   │   │   │   ├── iosoho.png
│   │   │   │   ├── mce.png
│   │   │   │   ├── mdevcamp.png
│   │   │   │   ├── missing_image.png
│   │   │   │   ├── mobiconf.png
│   │   │   │   ├── mobius.png
│   │   │   │   ├── oss.png
│   │   │   │   ├── photography.png
│   │   │   │   ├── pragmamark.png
│   │   │   │   ├── productionswift.png
│   │   │   │   ├── reactivecocoa.png
│   │   │   │   ├── sinfo.png
│   │   │   │   ├── slug.jpg
│   │   │   │   ├── swiftalps.png
│   │   │   │   ├── swift.png
│   │   │   │   ├── swiftsummit.png
│   │   │   │   ├── teaching.png
│   │   │   │   ├── tryswiftnyc.png
│   │   │   │   ├── tryswift.png
│   │   │   │   ├── ts_nyc.jpg
│   │   │   │   ├── uikonf.png
│   │   │   │   └── vitamins.png
│   │   │   └── upcomingtalks.jpg
│   │   └── uicollectionview
│   │       ├── background.jpg
│   │       └── cover.jpg
│   ├── CNAME
│   ├── cv.pdf
│   ├── favicon-32x32.png
│   ├── icons
│   │   ├── icon-144x144.png
│   │   ├── icon-192x192.png
│   │   ├── icon-256x256.png
│   │   ├── icon-384x384.png
│   │   ├── icon-48x48.png
│   │   ├── icon-512x512.png
│   │   ├── icon-72x72.png
│   │   └── icon-96x96.png
│   ├── keybase.txt
│   ├── manifest.webmanifest
│   ├── page-data
│   │   ├── 404.html
│   │   │   └── page-data.json
│   │   ├── about
│   │   │   └── page-data.json
│   │   ├── blog
│   │   │   ├── depresso
│   │   │   │   └── page-data.json
│   │   │   ├── mastodon-technology-shutdown
│   │   │   │   └── page-data.json
│   │   │   ├── page-data.json
│   │   │   └── re-espresso
│   │   │       └── page-data.json
│   │   ├── books
│   │   │   └── page-data.json
│   │   ├── contact
│   │   │   └── page-data.json
│   │   ├── credits
│   │   │   └── page-data.json
│   │   ├── dev-404-page
│   │   │   └── page-data.json
│   │   ├── index
│   │   │   └── page-data.json
│   │   ├── portfolio
│   │   │   └── page-data.json
│   │   ├── resume
│   │   │   └── page-data.json
│   │   └── search
│   │       └── page-data.json
│   ├── _redirects
│   ├── resume.pdf
│   ├── robots.txt
│   ├── siteSearchIndex.json
│   └── static
│       ├── 1442b0e55f78513f511d626541ab3f90
│       │   └── background.png
│       ├── 23a16a416137b7bc7bc32b30b3fb0391
│       ├── 2ccc93f8e2ee9917f99860e974c5905b
│       │   └── e5166
│       │       └── espresso.jpg
│       ├── 490d94841813ac9f3ac49564e0634b61
│       ├── 6bdfea3fe4cfe0856f31353047dc6cb6
│       ├── 6c76749c462bf2107e992db517ac8aa3
│       ├── 72e76e17425dfce85b264a9b3982df5b
│       ├── 745fc1898c8a2aa29830dd2bfc716fa7
│       ├── 77da0700fe692316c7c68da494eea266
│       ├── 78f70767f4b812aa2ac5ac06a04a4920
│       ├── 7dffcd25a0c8627b770d9cdd7f72a0b1
│       │   └── background.jpg
│       ├── b489e37974208a79c5333cba24e43d64
│       ├── d50a9f9e2bc0f240f9f4eeb576325764
│       ├── d5e8a9d38843664628fbccf29f50cf9a
│       ├── dd7f9dce669a31410525c9891b1273b5
│       └── e3c95feaafac510eb1e0de17353af8f4
├── README.md
├── reference-images
│   ├── 500px.svg
│   ├── exposure.sketch
│   ├── exposure.svg
│   └── instagram.svg
├── scripts
│   └── newPost.ts
├── src
│   ├── components
│   │   ├── Embeds.tsx
│   │   ├── FeaturedPost.tsx
│   │   ├── Header.tsx
│   │   ├── index.tsx
│   │   ├── Narrow.tsx
│   │   ├── Pagination.tsx
│   │   ├── PrevNext.tsx
│   │   ├── ReactResponsiveEmbed.tsx
│   │   ├── RightImage.tsx
│   │   ├── SectionHeader.tsx
│   │   ├── SectionTitle.tsx
│   │   ├── SEO.tsx
│   │   ├── TalkTile.tsx
│   │   ├── Title.tsx
│   │   ├── Wide.tsx
│   │   └── Wrapper.tsx
│   ├── config
│   │   ├── siteConfig.ts
│   │   └── theme.ts
│   ├── declarations.d.ts
│   ├── favicon.png
│   ├── layouts
│   │   ├── components
│   │   │   ├── Article.tsx
│   │   │   ├── CollapseMenu.tsx
│   │   │   ├── Content.tsx
│   │   │   ├── index.tsx
│   │   │   ├── MenuButton.tsx
│   │   │   ├── NavBar.tsx
│   │   │   ├── sendEmail.tsx
│   │   │   └── topBarStyle.ts
│   │   ├── index.tsx
│   │   ├── Layout.tsx
│   │   └── MDXLayout.tsx
│   ├── models
│   │   ├── AllMarkdownRemark.ts
│   │   ├── Data.ts
│   │   ├── Frontmatter.ts
│   │   ├── PageContext.ts
│   │   ├── PageProps.ts
│   │   ├── PageResources.ts
│   │   └── Post.ts
│   ├── pages
│   │   ├── 404.tsx
│   │   ├── about.mdx
│   │   ├── blog.tsx
│   │   ├── books.mdx
│   │   ├── contact.tsx
│   │   ├── credits.mdx
│   │   ├── index.tsx
│   │   ├── portfolio.tsx
│   │   ├── resume.tsx
│   │   ├── search.tsx
│   │   ├── speaking.mdx
│   │   └── uicollectionview-the-complete-guide.mdx
│   ├── templates
│   │   └── Post.tsx
│   └── utils
│       ├── media.ts
│       ├── paths.ts
│       ├── prismjs-theme.css
│       └── typography.ts
├── static
│   ├── assets
│   │   ├── bg
│   │   │   ├── 1.jpg
│   │   │   ├── 2.jpg
│   │   │   ├── 3.jpg
│   │   │   ├── 404.jpg
│   │   │   ├── 4.jpg
│   │   │   ├── about.jpg
│   │   │   ├── bg2.jpg
│   │   │   ├── bg3.jpg
│   │   │   ├── bg4.jpg
│   │   │   ├── bg5.jpg
│   │   │   ├── bg6.jpg
│   │   │   ├── bg.jpg
│   │   │   ├── bg.png
│   │   │   ├── books.jpg
│   │   │   ├── default.jpg
│   │   │   ├── home.png
│   │   │   ├── portfolio.jpg
│   │   │   ├── search.jpg
│   │   │   └── speaking.jpg
│   │   ├── bg2.jpg
│   │   ├── bg3.jpg
│   │   ├── bg4.jpg
│   │   ├── bg5.jpg
│   │   ├── bg6.jpg
│   │   ├── bg.jpg
│   │   ├── bg.png
│   │   ├── books
│   │   │   ├── iosfrp.jpg
│   │   │   ├── uicollectionview.jpg
│   │   │   └── yourfirstswiftapp.png
│   │   ├── cv.pdf
│   │   ├── featured
│   │   │   ├── asking-for-help-in-open-source.jpg
│   │   │   ├── building_better_software.png
│   │   │   ├── building_compassionate_software.jpg
│   │   │   ├── empathetic_civilization.jpg
│   │   │   ├── normaling_struggle.png
│   │   │   └── perspective_of_the_polyglot.png
│   │   ├── home.png
│   │   ├── portfolio
│   │   │   ├── 35mm.jpg
│   │   │   ├── 500px.jpg
│   │   │   ├── artsy.jpg
│   │   │   ├── blogging.jpg
│   │   │   ├── books.jpg
│   │   │   ├── callout_small.svg
│   │   │   ├── callout.svg
│   │   │   ├── community_header.jpg
│   │   │   ├── creativity_header.jpg
│   │   │   ├── education_header.jpg
│   │   │   ├── exposure_hover.png
│   │   │   ├── exposure.png
│   │   │   ├── exposure.svg
│   │   │   ├── software_header.jpg
│   │   │   ├── speaking.jpg
│   │   │   ├── team.jpg
│   │   │   └── treehouse.jpg
│   │   ├── siteimage_dark.png
│   │   ├── siteimage.png
│   │   ├── speaking
│   │   │   ├── getintouch.jpg
│   │   │   ├── pasttalks.jpg
│   │   │   ├── talks
│   │   │   │   ├── 500px.png
│   │   │   │   ├── altconf.png
│   │   │   │   ├── appbuilders.png
│   │   │   │   ├── appdevcon.png
│   │   │   │   ├── brooklyn.png
│   │   │   │   ├── buildingcompassionatesoftware.png
│   │   │   │   ├── catchingup.png
│   │   │   │   ├── collectionview.png
│   │   │   │   ├── comparative-async.png
│   │   │   │   ├── craft.png
│   │   │   │   ├── dotswift.png
│   │   │   │   ├── functional.png
│   │   │   │   ├── functionalreactive.png
│   │   │   │   ├── ghfordesigners.png
│   │   │   │   ├── goto.png
│   │   │   │   ├── interfaces.png
│   │   │   │   ├── iosoho.png
│   │   │   │   ├── mce.png
│   │   │   │   ├── mdevcamp.png
│   │   │   │   ├── missing_image.png
│   │   │   │   ├── mobiconf.png
│   │   │   │   ├── mobius.png
│   │   │   │   ├── oss.png
│   │   │   │   ├── photography.png
│   │   │   │   ├── pragmamark.png
│   │   │   │   ├── productionswift.png
│   │   │   │   ├── reactivecocoa.png
│   │   │   │   ├── sinfo.png
│   │   │   │   ├── slug.jpg
│   │   │   │   ├── swiftalps.png
│   │   │   │   ├── swift.png
│   │   │   │   ├── swiftsummit.png
│   │   │   │   ├── teaching.png
│   │   │   │   ├── tryswiftnyc.png
│   │   │   │   ├── tryswift.png
│   │   │   │   ├── ts_nyc.jpg
│   │   │   │   ├── uikonf.png
│   │   │   │   └── vitamins.png
│   │   │   └── upcomingtalks.jpg
│   │   └── uicollectionview
│   │       ├── background.jpg
│   │       └── cover.jpg
│   ├── CNAME
│   ├── cv.pdf
│   ├── keybase.txt
│   ├── _redirects
│   └── robots.txt
├── tsconfig.json
├── webpack.config.js
└── yarn.lock

我被困在这了。不知道如何才能从我的简历.tsx文件内的网页目录呈现一个pdf。所以它显示为mysite.com/resume.pdf。