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

Question

我正在提供一些静态文件，如图像和字体，没有任何问题。 当我尝试对 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 中的模块“application-loader” /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 在使用文件加载器时会尝试解析文件？

Answer 1

使用 webpack file-loader 模块在生产或开发过程中处理静态内容并成功使用 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 规则，如：

{
  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]'
        }
      }
    ]
  }

Answer 2

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