使用React Webpack文件加载器提供静态PDF文件

Question

我可以成功地提供一些静态文件，如图片和字体，但是当我尝试提供PDF文件时会出现错误。

./src/views/default/components/Footer.js中的ERROR

c:\Resurs\repos\Frontend\src\views\default\components\Footer.js 5:17 error 'src/includes/ANVANDARAVTAL_MITTKONTOR.pdf'导入的模块存在解析错误 import/default

✖ 1个问题（1个错误，0个警告）

./src/views/default/components/Footer.js中的ERROR 模块未找到：错误：无法解析模块“application-loader” 在c:\Resurs\repos\Frontend\src\views\default\components中 @ ./src/views/default/components/Footer.js 21:32-84

Webpack配置正常工作，包括JSX、ES6、CSS、静态文件的所有加载器... 除了PDF的加载器配置。

{
    test: /\.pdf(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file-loader?minetype=application/pdf&name=[name].pdf'
}

我的另一个加载器配置，对于PDF文件看起来几乎相同，并且可以正常工作......为什么（哭泣）！？例如：

{
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file-loader'
}

将文件导入到React组件中的方法如下：

import bg from "src/design/images/loginBG.jpg"; //works fine
import pdf from "src/includes/ANVANDARAVTAL_MITTKONTOR.pdf"; //NOT WORKING!

我尝试了很多配置，搜索了错误信息，搜索了可以解决问题的加载器。关于从webpack/react提供静态内容的问题，除了通常的图像、CSS和JavaScript外，没有找到其他内容。

我也尝试提供一个txt文件来测试是否可行。这也与PDF相同出现了错误。

为什么使用文件加载器时webpack会尝试解析这些文件？

- Dizzypointed

---

什么是 application-loader？你的配置文件中有吗？minetype 中还有一个拼写错误 - 应该是 mimetype。 - CodingIntrigue

这个捕获组对于 .pdf 文件是否必要？我知道它被包裹在 0 或多个 ? 中，但我很好奇没有它会怎样执行。 - Sean Larkin

你能否把与 ERROR in ./src/views/default/components/Footer.js Module not found: Error: Cannot resolve module 'application-loader' in c:\Resurs\repos\Frontend\src\views\default\components @ ./src/views/default/components/Footer.js 21:32-84 相关的代码行粘贴一下吗？ - Juho Vepsäläinen

嘿，我也遇到了完全相同的问题。你找到解决办法了吗？ - Hossein

可能是在Windows上使用Node查找PDF页数的重复问题。 - Paul Sweatte

Answer 1

使用webpack的file-loader模块在生产或开发过程中处理静态内容，并成功地使用PDF文件。以下是该过程的简化版本：

React组件

在组件文件中，首先导入PDF文件，例如：

import PdfFile from '../../src/file.pdf'

然后更改 href 属性：

<a href={PdfFile} target='_blank' >
    <p>Click to open PDF file in a new tab</p>
</a>

Webpack 加载器

定义 webpack 规则如下：

{
  test: /\.(pdf|gif|png|jpe?g|svg)$/,
  use: 'file-loader?name=[path][name].[ext]',
  include: paths
}

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

- Jake Peyser

Answer 2

提醒一下，在 PowerShell 中按 Ctrl+C 停止 webpack，然后重新启动它以使配置生效。

- Qiao Wen