使用 react webpack 文件加载器提供静态 pdf

Posted 2023-02-22

【中文标题】使用 react webpack 文件加载器提供静态 pdf

【英文标题】：Serving static pdf with react webpack file loader

【发布时间】：2016-08-07 05:16:58

【问题描述】：

我正在提供一些静态文件，如图像和字体，没有任何问题。当我尝试对 PDF 文件执行相同操作时，出现错误。

./src/views/default/components/Footer.js 中的错误

c:\Resurs\repos\Frontend\src\views\default\components\Footer.js 5:17 错误解析导入模块“src/includes/ANVANDARAVTAL_MITTKONTOR.pdf”导入/默认中的错误

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

./src/views/default/components/Footer.js 中的错误 找不到模块：错误：无法解析 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!

我尝试了很多配置，搜索了错误，搜索了可以解决问题的加载程序。除了通常的图像、css、js 之外，没有关于从 webpack/react 提供静态内容的内容。

我还尝试提供一个 txt 文件来查看它是否有效。这也会失败，并出现与 PDF 相同的错误。

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

【问题讨论】：

application-loader 是什么？你的配置里有这个吗？你在minetype 中也有一个错字 - 应该是mimetype

.pdf 文件是否需要该捕获组？我知道它被 0 个或多个 ? 包裹，但我很好奇没有它它的表现如何。

有没有机会粘贴与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相关的行？

嘿，我也有同样的问题。你找到解决办法了吗？

Find PDF page count with Node (on Windows)的可能重复

【参考方案1】：

在生产或开发过程中使用 webpack file-loader module 处理静态内容并成功使用 PDF。这是该过程的简化版本：

反应组件

在您的组件文件中首先导入 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]'
        
      
    ]
  

【参考方案2】：

只是提醒退出 webpack（在 powershell 中为 Ctrl+C）并重新启动它以使配置生效。